dbm 1.4.7 → 1.4.9

package/loading/index.js

@@ -4,6 +4,7 @@ export {default as ScriptLoader} from "./ScriptLoader.js";
 export {default as JsonLoader} from "./JsonLoader.js";
 export {default as ImageLoader} from "./ImageLoader.js";
 export {default as LoadingSequence} from "./LoadingSequence.js";
+export {default as FontLoader} from "./FontLoader.js";
 
 export * as LoadingStatus from "./LoadingStatus.js";
 
@@ -52,5 +53,25 @@ export const loadImage = function(aUrl) {
     let loader = getImageLoader(aUrl);
     loader.load();
 
+    return loader;
+}
+
+export const loadFont = function(aUrl, aFontName) {
+    let loaderName = "loader-" + aUrl;
+    let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
+    
+    let loader;
+    if(!loaderItem) {
+        loader = new Dbm.loading.FontLoader();
+        loader.item.register(loaderName);
+        loader.setUrl(aUrl);
+        loader.setFontName(aFontName);
+    }
+    else {
+        loader = loaderItem.controller;
+    }
+
+    loader.load();
+
     return loader;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "main": "index.js",
   "type": "module",
   "exports": {

package/react/BaseObject.js

@@ -227,6 +227,33 @@ export default class BaseObject extends Component {
 
         return createElement.apply(null, callArray);
     }
+
+    _getScopedCallFunctionCommand(aFunction, aArguments = []) {
+        let CallFunction = Dbm.objectPath(Dbm.getRepositoryItem("library"), "Dbm/commands/CallFunction");
+        let command = new CallFunction();
+        command.item.scopeObject = this;
+        command.item.callFunction = aFunction;
+        command.item.callArguments = aArguments;
+
+        return command;
+    }
+
+    _propertyOrName(aPropertyOrName) {
+        if(typeof(aPropertyOrName) === "string") {
+            return this.item.properties[aPropertyOrName];
+        }
+
+        return aPropertyOrName;
+    }
+
+    addUpdateCall(aPropertyOrName, aFunction, aArguments = []) {
+        this._propertyOrName(aPropertyOrName).addUpdate(this._getScopedCallFunctionCommand(aFunction, aArguments));
+    }
+
+    addUpdateCallWhenMatched(aPropertyOrName, aMatchValue, aFunction, aArguments = []) {
+        console.log(this._propertyOrName(aPropertyOrName), aPropertyOrName);
+        this._propertyOrName(aPropertyOrName).addUpdateWhenMatched(aMatchValue, this._getScopedCallFunctionCommand(aFunction, aArguments));
+    }
 }
 
 BaseObject.contextType = Context;

package/react/admin/editor/fields/EditorBlocks.js

@@ -0,0 +1,62 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class EditorBlocks extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = {};
+        }
+
+        console.log(editorData, returnData);
+
+        return returnData;
+    }
+
+    _valueChanged() {
+        console.log("EditorBlock::_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = {...this.item.value};
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        let newValue = this._getObjectData();
+        if(JSON.stringify(newValue) !== JSON.stringify(this.item.value)) {
+            this.item.value = newValue;
+        }
+
+        
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.admin.editor.Editor, {value: this.item.properties.value})
+        );
+    }
+}

package/react/admin/editor/fields/index.js

@@ -5,4 +5,5 @@ export {default as CheckboxField} from "./CheckboxField.js";
 export {default as SelectObjectField} from "./SelectObjectField.js";
 export {default as SelectObjectsField} from "./SelectObjectsField.js";
 export {default as SelectionField} from "./SelectionField.js";
-export {default as ArrayField} from "./ArrayField.js";
+export {default as ArrayField} from "./ArrayField.js";
+export {default as EditorBlocks} from "./EditorBlocks.js";

package/react/area/ResponsiveLayout.js

@@ -16,7 +16,7 @@ export default class ResponsiveLayout extends Dbm.core.BaseObject {
         let layoutSwitch = new Dbm.flow.updatefunctions.logic.RangeSwitch();
         layoutSwitch.input.properties.value.connectInput(elementSize.output.properties.width);
 
-        this.item.setValue("layoutSwitch", layoutSwitch)
+        this.item.setValue("layoutSwitch", layoutSwitch);
 
         this.item.setValue("element", null);
         this.item.properties.element.connectInput(layoutSwitch.output.properties.value);

package/react/area/RowOrStacked.js

@@ -0,0 +1,74 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class RowOrStacked extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.setValue("stackedChildren", []);
+        this.item.setValue("rowChildren", []);
+        this.item.requireProperty("spacingElement", null)
+
+        let list = React.createElement(Dbm.react.area.List, {"items": this.item.properties.stackedChildren, "as": "element"},
+            React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.contextVariable("element")}),
+            React.createElement(Dbm.react.area.InsertElement, {"data-slot": "spacing", "element": this.item.properties.spacingElement})
+        )
+
+        let responsiveLayout = new Dbm.react.area.responsiveLayout(React.createElement("div", {}, list));
+
+        let breakpoint = this.getPropValueWithDefault("breakpoint", 600);
+        let rowClasses = "flex-row" + " " + this.getPropValueWithDefault("rowClassName", "");
+
+        let rowList = React.createElement(Dbm.react.area.List, {"items": this.item.properties.rowChildren, "as": "element"},
+            React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.contextVariable("element")})
+        )
+
+        responsiveLayout.addLayout(React.createElement("div", {"className": rowClasses}, rowList), breakpoint);
+
+        this.item.setValue("responsiveLayout", responsiveLayout);
+        
+
+        let childrenProperty = this.getDynamicPropWithoutState("children", []);
+        Dbm.flow.addUpdateCommand(childrenProperty, Dbm.commands.callFunction(this._updateSlots.bind(this)));
+
+        this._updateSlots();
+    }
+
+    _updateSlots() {
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+        
+        let spacing = slots["spacing"];
+        this.item.stackedChildren = slots.main;
+
+        let rowClasses = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(this.getPropValueWithDefault("rowClasses", []), ",", true);
+        let rowClassesLength = rowClasses.length;
+
+        let rowElements = []; 
+        let currentArray = slots.main;
+        if(currentArray) {
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+
+                let rowClass = (i < rowClassesLength) ? rowClasses[i] : "";
+
+                rowElements.push(
+                    React.createElement("div", {"className": "flex-row-item" + " " + rowClass},
+                        currentArray[i]
+                    )
+                )
+            }
+        }
+        
+
+        this.item.rowChildren = rowElements;
+
+        this.item.spacingElement = spacing ? spacing :  React.createElement(React.Fragment);
+    }
+
+    _renderMainElement() {
+        return this.item.responsiveLayout.mainElement;
+    }
+}
+

package/react/area/SelectResponsiveLayout.js

@@ -0,0 +1,77 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SelectResponsiveLayout extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let defaultLayout = this.getPropValueWithDefault("defaultLayout", "mobile");
+
+        this.item.requireProperty("widthElement", null);
+
+        let elementSize = new Dbm.flow.updatefunctions.dom.ElementSize();
+        this.item.setValue("elementSize", elementSize);
+
+        elementSize.input.properties.element.connectInput(this.item.properties.widthElement);
+        elementSize.start();
+
+        let layoutSwitch = new Dbm.flow.updatefunctions.logic.RangeSwitch();
+        layoutSwitch.input.properties.value.connectInput(elementSize.output.properties.width);
+        this.item.setValue("layoutSwitch", layoutSwitch);
+
+        layoutSwitch.input.defaultValue = defaultLayout;
+
+        let layouts = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(this.getPropValueWithDefault("layouts", "600:desktop"), ",", true);
+        console.log(layouts);
+
+        let encodedLayouts = [];
+        {
+            let currentEncodedLayout = null;
+
+            let currentArray = layouts;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let tempArray = currentArray[i].split(":");
+                let size = 1*tempArray[0];
+                let name = tempArray[1];
+
+                if(currentEncodedLayout) {
+                    currentEncodedLayout["max"] = size;
+                }
+                
+                currentEncodedLayout = {
+                    "name": name,
+                    "min": size,
+                    "max": null
+                }
+
+                encodedLayouts.push(currentEncodedLayout);
+            }
+        }
+        
+        {
+            let currentArray = encodedLayouts;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentEncodedLayout = currentArray[i];
+                this.item.layoutSwitch.addValueForRange(currentEncodedLayout["name"], currentEncodedLayout["min"], currentEncodedLayout["max"]);
+
+            }
+        }
+        
+
+        
+
+        this.item.requireProperty("layout", defaultLayout).connectInput(layoutSwitch.output.properties.value);
+        this.item.properties.layout
+    }
+
+    _renderMainElement() {
+        return React.createElement("div", {ref: this.createRef("widthElement")},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"layout": this.item.properties.layout}},
+                this.getPropValue("children")
+            )
+        );
+    }
+}
+

package/react/area/SwitchableArea.js

@@ -27,7 +27,7 @@ export default class SwitchableArea extends Dbm.react.BaseObject {
             slotElement = mainChildren;
         }
 
-        this.item.element = React.createElement(React.Fragment, {key: slotElement}, slotElement);
+        this.item.element = React.createElement(React.Fragment, {key: area}, slotElement);
     }
 
     _renderMainElement() {

package/react/area/index.js

@@ -11,6 +11,8 @@ export {default as List} from "./List.js";
 export {default as FixedWidthInfiniteSlideshow} from "./FixedWidthInfiniteSlideshow.js";
 export {default as SwitchableArea} from "./SwitchableArea.js";
 export {default as PopoverLayer} from "./PopoverLayer.js";
+export {default as RowOrStacked} from "./RowOrStacked.js";
+export {default as SelectResponsiveLayout} from "./SelectResponsiveLayout.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();
@@ -29,4 +31,15 @@ export const centeredFlexDiv = function(aChildren) {
     return React.createElement("div", {className: "flex-row justify-center"}, 
         React.createElement("div", {className: "flex-row-item"}, aChildren)
     );
+}
+
+export const processStateElement = function(aState, aIdleElement, aProcessingElement, aCompletedElement) {
+    let updateFunction = Dbm.flow.updatefunctions.logic.switchValue(aState);
+    updateFunction.setDefaultValue(aIdleElement);
+    updateFunction.addCase(Dbm.loading.LoadingStatus.LOADING, aProcessingElement);
+    updateFunction.addCase(Dbm.loading.LoadingStatus.LOADED, aCompletedElement);
+
+    let element = React.createElement(Dbm.react.area.InsertElement, {"element": updateFunction.output.properties.value});
+
+    return updateFunction;
 }

package/react/context/AddItemToContext.js

@@ -19,6 +19,6 @@ export default class AddItemToContext extends Dbm.react.BaseObject {
         let values = {};
         values[as] = item;
 
-        return React.createElement(Dbm.react.context.AddContextVariables, {"values": values, "key": id}, this.props.children);
+        return React.createElement(Dbm.react.context.AddContextVariables, {"values": values, "key": id}, this.getPropValue("children"));
     }
 }

package/react/cookies/CookieBar.js

@@ -44,19 +44,25 @@ export default class CookieBar extends Dbm.react.BaseObject {
             
             React.createElement("div", {},
                 React.createElement("div", {"className": "cookie-bar-title"},
-                    "Your privacy is important to us"
+                    Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                 ),
                 React.createElement("div", {"className": "cookie-bar-description"},
-                    "We use cookies to improve your experience on our site."
+                    Dbm.react.text.translatedText("We use cookies to improve your experience on our site.", "text/description")
                 )
             ),
             React.createElement("div", {"className": "spacing small"}),
-            React.createElement("div", {"className": "standard-button standard-button-padding text-align-center",  onClick: () => this._acceptAll()}, "Allow all"),
+            React.createElement("div", {"className": "standard-button standard-button-padding text-align-center",  onClick: () => this._acceptAll()},
+                Dbm.react.text.translatedText("Allow all", "allowAll")
+            ),
             React.createElement("div", {"className": "spacing small"}),
-            React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center", onClick: () => this._rejectAll()}, "Only necessary"),
+            React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center", onClick: () => this._rejectAll()},
+                Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
+            ),
             React.createElement("div", {"className": "spacing small"}),
-            React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
-                React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"}, "Settings")
+            React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+                React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"},
+                    Dbm.react.text.translatedText("Settings", "settings")
+                )
             )
         
         );
@@ -65,25 +71,31 @@ export default class CookieBar extends Dbm.react.BaseObject {
             
             React.createElement("div", {},
                 React.createElement("div", {"className": "cookie-bar-title"},
-                    "Your privacy is important to us"
+                    Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                 ),
                 React.createElement("div", {"className": "cookie-bar-description"},
-                    "We use cookies to improve your experience on our site."
+                    Dbm.react.text.translatedText("We use cookies to improve your experience on our site.", "text/description")
                 )
             ),
             React.createElement("div", {"className": "spacing small"}),
             
             React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                 React.createElement("div", {"className": "flex-row-item"},
-                    React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
-                        React.createElement("div", {"className": "secondary-button standard-button-padding"}, "Settings")
+                    React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+                        React.createElement("div", {"className": "secondary-button standard-button-padding"},
+                            Dbm.react.text.translatedText("Settings", "settings")
+                        )
                     )
                 ),
                 React.createElement("div", {"className": "flex-row-item"},
-                    React.createElement("div", {"className": "secondary-button standard-button-padding", onClick: () => this._rejectAll()}, "Only necessary")
+                    React.createElement("div", {"className": "secondary-button standard-button-padding", onClick: () => this._rejectAll()},
+                        Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
+                    )
                 ),
                 React.createElement("div", {"className": "flex-row-item"},
-                    React.createElement("div", {"className": "standard-button standard-button-padding",  onClick: () => this._acceptAll()}, "Allow all")
+                    React.createElement("div", {"className": "standard-button standard-button-padding",  onClick: () => this._acceptAll()},
+                        Dbm.react.text.translatedText("Allow all", "allowAll")
+                    )
                 )
             )
         );
@@ -94,24 +106,30 @@ export default class CookieBar extends Dbm.react.BaseObject {
             React.createElement("div", {"className": "flex-row small-item-spacing justify-between"}, 
                 React.createElement("div", {"className": "flex-row-item"},
                     React.createElement("div", {"className": "cookie-bar-title"},
-                        "Your privacy is important to us"
+                        Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                     ),
                     React.createElement("div", {"className": "cookie-bar-description"},
-                        "We use cookies to improve your experience on our site."
+                        Dbm.react.text.translatedText("We use cookies to improve your experience on our site.", "text/description")
                     )
                 ),
                 React.createElement("div", {"className": "flex-row-item"}, 
                     React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                         React.createElement("div", {"className": "flex-row-item"},
-                            React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
-                                React.createElement("div", {"className": "secondary-button standard-button-padding"}, "Settings")
+                            React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+                                React.createElement("div", {"className": "secondary-button standard-button-padding"}, 
+                                    Dbm.react.text.translatedText("Settings", "settings")
+                                )
                             )
                         ),
                         React.createElement("div", {"className": "flex-row-item"},
-                            React.createElement("div", {"className": "secondary-button standard-button-padding", onClick: () => this._rejectAll()}, "Only necessary")
+                            React.createElement("div", {"className": "secondary-button standard-button-padding", onClick: () => this._rejectAll()}, 
+                                Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
+                            )
                         ),
                         React.createElement("div", {"className": "flex-row-item"},
-                            React.createElement("div", {"className": "standard-button standard-button-padding",  onClick: () => this._acceptAll()}, "Allow all")
+                            React.createElement("div", {"className": "standard-button standard-button-padding",  onClick: () => this._acceptAll()},
+                                Dbm.react.text.translatedText("Allow all", "allowAll")
+                            )
                         )
                     )
                 )
@@ -186,10 +204,12 @@ export default class CookieBar extends Dbm.react.BaseObject {
 
         return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events", "data-non-static": 1, ref: this.createRef("widthElement")},
             React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.inDom},
-                React.createElement("div", {className: "overflow-hidden"},	
-                    React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},
-                        React.createElement("div", {className: "all-pointer-events"},
-                            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+                React.createElement(Dbm.react.text.TranslationGroup, {"path": "cookies/notice/bar"},
+                    React.createElement("div", {className: "overflow-hidden"},	
+                        React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},
+                            React.createElement("div", {className: "all-pointer-events"},
+                                React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+                            )
                         )
                     )
                 )

package/react/cookies/CookieOverlayMessage.js

@@ -45,25 +45,31 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                 
                 React.createElement("div", {},
                     React.createElement("div", {"className": "cookie-bar-title"},
-                        "Your privacy is important to us"
+                        Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                     ),
                     React.createElement("div", {"className": "cookie-bar-description"},
-                        "We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings."
+                        Dbm.react.text.translatedText("We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings.", "text/description")
                     )
                 ),
                 React.createElement("div", {"className": "spacing small"}),
-                React.createElement("div", {"className": "standard-button standard-button-padding big text-align-center",  onClick: () => this._acceptAll()}, "Allow all"),
+                React.createElement("div", {"className": "standard-button standard-button-padding big text-align-center",  onClick: () => this._acceptAll()},
+                    Dbm.react.text.translatedText("Allow all", "allowAll")
+                ),
                 React.createElement("div", {"className": "spacing small"}),
-                React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center", onClick: () => this._rejectAll()}, "Only necessary"),
+                React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center", onClick: () => this._rejectAll()},
+                    Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
+                ),
                 React.createElement("div", {"className": "spacing small"}),
                 React.createElement("div", {"className": "cookie-overlay-message-divider"}),
                 React.createElement("div", {"className": "spacing small"}),
                 React.createElement("div", {"className": "text-align-center"},
-                    "Take full control over how we use cookies:"
+                    Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                 ),
                 React.createElement("div", {"className": "spacing small"}),
                 React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
-                    React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"}, "Settings")
+                    React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"},
+                        Dbm.react.text.translatedText("Settings", "settings")
+                    )
                 )
             
             )
@@ -74,17 +80,21 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                 React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                     React.createElement("div", {"className": "flex-row-item half"},
                         React.createElement("div", {"className": "cookie-bar-title"},
-                            "Your privacy is important to us"
+                            Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                         ),
                         React.createElement("div", {"className": "cookie-bar-description"},
-                            "We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings."
+                            Dbm.react.text.translatedText("We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings.", "text/description")
                         )
                     ),
                     React.createElement("div", {"className": "flex-row-item quarter"}),
                     React.createElement("div", {"className": "flex-row-item quarter"}, 
-                        React.createElement("div", {"className": "standard-button standard-button-padding big full-width text-align-center",  onClick: () => this._acceptAll()}, "Allow all"),
+                        React.createElement("div", {"className": "standard-button standard-button-padding big full-width text-align-center",  onClick: () => this._acceptAll()},
+                            Dbm.react.text.translatedText("Allow all", "allowAll")
+                        ),
                         React.createElement("div", {"className": "spacing medium"}),
-                        React.createElement("div", {"className": "secondary-button standard-button-padding full-width text-align-center", onClick: () => this._rejectAll()}, "Only necessary")
+                        React.createElement("div", {"className": "secondary-button standard-button-padding full-width text-align-center", onClick: () => this._rejectAll()},
+                            Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
+                        )
                         
                     )
                 ),
@@ -93,11 +103,13 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                 React.createElement("div", {"className": "spacing standard"}),
                 React.createElement("div", {"className": "flex-row small-item-spacing justify-between"},
                     React.createElement("div", {"className": "flex-row-item"},
-                        "Take full control over how we use cookies:"
+                        Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                     ),
                     React.createElement("div", {"className": "flex-row-item"},
                         React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
-                            React.createElement("div", {"className": "cookie-settings-link"}, "Settings >")
+                            React.createElement("div", {"className": "cookie-settings-link"}, 
+                                Dbm.react.text.translatedText("Settings", "settings")
+                            )
                         )
                     ),
                 )
@@ -174,10 +186,12 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
 
         return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events cookie-overlay-message-layer", ref: this.createRef("widthElement")},
             React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.inDom},
-                React.createElement("div", {className: "overflow-hidden"},	
-                    React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},
-                        React.createElement("div", {},
-                            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+                React.createElement(Dbm.react.text.TranslationGroup, {"path": "cookies/notice/overlay"},
+                    React.createElement("div", {className: "overflow-hidden"},	
+                        React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},
+                            React.createElement("div", {},
+                                React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+                            )
                         )
                     )
                 )