sequential-workflow-editor - npm Package Compare versions

Comparing version 0.11.3 to 0.12.0

dist/index.umd.js

@@ -158,3 +158,3 @@ (function (global, factory) {
 	            items.forEach((item, index) => {
-	                const component = itemComponentFactory(item);
+	                const component = itemComponentFactory(item, context.i18n);
 	                component.onItemChanged.subscribe(item => onItemChanged(item, index));
@@ -494,3 +494,3 @@ component.onDeleteClicked.subscribe(() => onItemDeleted(index));
 	    const input = prependedInputComponent('$', inputComponent(variable.name, {
-	        placeholder: 'Variable name'
+	        placeholder: context.i18n('variableDefinitions.namePlaceholder', 'Variable name')
 	    }));
@@ -505,3 +505,3 @@ input.onChanged.subscribe(onNameChanged);
 	    typeSelect.onSelected.subscribe(onTypeChanged);
-	    const deleteButton = buttonComponent('Delete', {
+	    const deleteButton = buttonComponent(context.i18n('variableDefinitions.delete', 'Delete'), {
 	        size: 'small',
@@ -586,3 +586,6 @@ theme: 'secondary',
 	    });
-	    select.setValues(['- Select -', ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))]);
+	    select.setValues([
+	        context.i18n('nullableVariable.select', '- Select -'),
+	        ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))
+	    ]);
 	    if (startValue) {
@@ -630,3 +633,3 @@ select.selectIndex(variables.findIndex(variable => variable.name === startValue.name) + 1);
 
-	function anyVariableItemComponent(variable) {
+	function anyVariableItemComponent(variable, i18n) {
 	    function validate(error) {
@@ -639,3 +642,3 @@ validation.setError(error);
 	    name.innerText = formatVariableNameWithType(variable.name, variable.type);
-	    const deleteButton = buttonComponent('Delete', {
+	    const deleteButton = buttonComponent(i18n('anyVariable.delete', 'Delete'), {
 	        size: 'small',
@@ -672,3 +675,3 @@ theme: 'secondary',
 	        const variableNames = variables.map(variable => formatVariableName(variable.name));
-	        variableSelect.setValues(['- Select -', ...variableNames]);
+	        variableSelect.setValues([context.i18n('anyVariable.select', '- Select -'), ...variableNames]);
 	    }
@@ -694,3 +697,3 @@ function onAddClicked() {
 	    let variables = null;
-	    const addButton = buttonComponent('Add variable', {
+	    const addButton = buttonComponent(context.i18n('anyVariable.addVariable', 'Add variable'), {
 	        icon: Icons.add
@@ -726,3 +729,3 @@ });
 	    const list = dynamicListComponent(context.getValue().variables, anyVariableItemComponent, context, {
-	        emptyMessage: 'No variables selected'
+	        emptyMessage: context.i18n('anyVariables.noVariablesSelected', 'No variables selected')
 	    });
@@ -788,3 +791,5 @@ list.onChanged.subscribe(onChanged);
 	    });
-	    subModelSelect.setValues(context.model.subModels.map(model => model.label));
+	    subModelSelect.setValues(context.model.subModels.map(model => {
+	        return context.i18n(`dynamic.${model.id}.label`, model.label);
+	    }));
 	    subModelSelect.selectIndex(context.model.subModels.findIndex(model => model.id === startValue.modelId));
@@ -856,3 +861,6 @@ subModelSelect.onSelected.subscribe(onTypeChanged);
 	    });
-	    select.setValues(['- Select -', ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))]);
+	    select.setValues([
+	        context.i18n('nullableAnyVariable.select', '- Select -'),
+	        ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))
+	    ]);
 	    if (startValue) {
@@ -886,3 +894,3 @@ select.selectIndex(variables.findIndex(variable => variable.name === startValue.name) + 1);
 	    });
-	    select.setValues(['False', 'True']);
+	    select.setValues([context.i18n('boolean.false', 'False'), context.i18n('boolean.true', 'True')]);
 	    select.selectIndex(context.getValue() ? 1 : 0);
@@ -930,3 +938,3 @@ select.onSelected.subscribe(onSelected);
 
-	function stringDictionaryItemComponent(item) {
+	function stringDictionaryItemComponent(item, i18n) {
 	    function validate(error) {
@@ -941,10 +949,10 @@ validation.setError(error);
 	    const keyInput = inputComponent(item.key, {
-	        placeholder: 'Key'
+	        placeholder: i18n('stringDictionary.key', 'Key')
 	    });
 	    keyInput.onChanged.subscribe(onChanged);
 	    const valueInput = inputComponent(item.value, {
-	        placeholder: 'Value'
+	        placeholder: i18n('stringDictionary.value', 'Value')
 	    });
 	    valueInput.onChanged.subscribe(onChanged);
-	    const deleteButton = buttonComponent('Delete', {
+	    const deleteButton = buttonComponent(i18n('stringDictionary.delete', 'Delete'), {
 	        size: 'small',
@@ -985,7 +993,7 @@ theme: 'secondary',
 	    const list = dynamicListComponent(context.getValue().items, stringDictionaryItemComponent, context, {
-	        emptyMessage: 'No items'
+	        emptyMessage: context.i18n('stringDictionary.noItems', 'No items')
 	    });
 	    list.onChanged.subscribe(onChanged);
 	    const container = valueEditorContainerComponent([list.view]);
-	    const addButton = buttonComponent('Add item', {
+	    const addButton = buttonComponent(context.i18n('stringDictionary.addItem', 'Add item'), {
 	        size: 'small',
@@ -1278,4 +1286,4 @@ icon: Icons.add
 	class PropertyEditor {
-	    static create(propertyModel, definitionContext, editorServices) {
-	        const valueContext = sequentialWorkflowEditorModel.ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext);
+	    static create(propertyModel, stepType, definitionContext, editorServices) {
+	        const valueContext = sequentialWorkflowEditorModel.ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
 	        const valueEditorFactory = editorServices.valueEditorFactoryResolver.resolve(propertyModel.value.id, propertyModel.value.editorId);
@@ -1294,3 +1302,4 @@ const valueEditor = valueEditorFactory(valueContext, editorServices);
 	        });
-	        label.innerText = propertyModel.label;
+	        const i18nPrefix = stepType ? `step.${stepType}.property:` : 'root.property:';
+	        label.innerText = editorServices.i18n(i18nPrefix + propertyModel.path.toString(), propertyModel.label);
 	        header.appendChild(label);
@@ -1319,3 +1328,3 @@ view.appendChild(header);
 	        if (propertyModel.validator) {
-	            const valueContext = sequentialWorkflowEditorModel.ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext);
+	            const valueContext = sequentialWorkflowEditorModel.ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
 	            const validatorContext = sequentialWorkflowEditorModel.PropertyValidatorContext.create(valueContext);
@@ -1354,11 +1363,12 @@ validationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
 	class EditorHeader {
-	    static create(data) {
+	    static create(data, stepType, i18n) {
 	        const view = Html.element('div', { class: 'swe-editor-header' });
 	        const title = Html.element('h3', { class: 'swe-editor-header-title' });
-	        title.textContent = data.label;
+	        title.textContent = i18n(`step.${stepType}.name`, data.label);
 	        view.appendChild(title);
 	        if (data.description) {
-	            const description = Html.element('p', { class: 'swe-editor-header-description' });
-	            appendMultilineText(description, data.description);
-	            view.appendChild(description);
+	            const description = i18n(`step.${stepType}.description`, data.description);
+	            const p = Html.element('p', { class: 'swe-editor-header-description' });
+	            appendMultilineText(p, description);
+	            view.appendChild(p);
 	        }
@@ -1373,7 +1383,7 @@ return new EditorHeader(view);
 	class Editor {
-	    static create(headerData, validator, propertyModels, definitionContext, editorServices, typeClassName) {
+	    static create(headerData, validator, propertyModels, stepType, definitionContext, editorServices) {
 	        const root = document.createElement('div');
-	        root.className = `swe-editor swe-type-${typeClassName}`;
+	        root.className = `swe-editor swe-type-${stepType !== null && stepType !== void 0 ? stepType : 'root'}`;
 	        if (headerData) {
-	            const header = EditorHeader.create(headerData);
+	            const header = EditorHeader.create(headerData, stepType !== null && stepType !== void 0 ? stepType : 'root', editorServices.i18n);
 	            root.appendChild(header.view);
@@ -1391,3 +1401,3 @@ }
 	            }
-	            const propertyEditor = PropertyEditor.create(propertyModel, definitionContext, editorServices);
+	            const propertyEditor = PropertyEditor.create(propertyModel, stepType, definitionContext, editorServices);
 	            root.appendChild(propertyEditor.view);
@@ -1431,10 +1441,11 @@ editors.set(propertyModel, propertyEditor);
 	    static create(definitionModel, configuration) {
-	        var _a;
+	        var _a, _b;
 	        const definitionWalker = (_a = configuration.definitionWalker) !== null && _a !== void 0 ? _a : new DefinitionWalker();
+	        const i18n = (_b = configuration.i18n) !== null && _b !== void 0 ? _b : sequentialWorkflowEditorModel.defaultI18n;
 	        const activator = sequentialWorkflowEditorModel.ModelActivator.create(definitionModel, configuration.uidGenerator);
 	        const validator = sequentialWorkflowEditorModel.DefinitionValidator.create(definitionModel, definitionWalker);
 	        const valueEditorFactoryResolver = ValueEditorFactoryResolver.create(configuration.extensions);
-	        return new EditorProvider(activator, validator, definitionModel, definitionWalker, valueEditorFactoryResolver, configuration);
+	        return new EditorProvider(activator, validator, definitionModel, definitionWalker, i18n, valueEditorFactoryResolver, configuration);
 	    }
-	    constructor(activator, validator, definitionModel, definitionWalker, valueEditorFactoryResolver, configuration) {
+	    constructor(activator, validator, definitionModel, definitionWalker, i18n, valueEditorFactoryResolver, configuration) {
 	        this.activator = activator;
@@ -1444,2 +1455,3 @@ this.validator = validator;
 	        this.definitionWalker = definitionWalker;
+	        this.i18n = i18n;
 	        this.valueEditorFactoryResolver = valueEditorFactoryResolver;
@@ -1449,3 +1461,4 @@ this.configuration = configuration;
 	            activator: this.activator,
-	            valueEditorFactoryResolver: this.valueEditorFactoryResolver
+	            valueEditorFactoryResolver: this.valueEditorFactoryResolver,
+	            i18n: this.i18n
 	        };
@@ -1455,5 +1468,4 @@ }
 	        return (definition, context) => {
-	            const rootContext = sequentialWorkflowEditorModel.DefinitionContext.createForRoot(definition, this.definitionModel, this.definitionWalker);
-	            const typeClassName = 'root';
-	            const editor = Editor.create(null, null, this.definitionModel.root.properties, rootContext, this.services, typeClassName);
+	            const rootContext = sequentialWorkflowEditorModel.DefinitionContext.createForRoot(definition, this.definitionModel, this.definitionWalker, this.i18n);
+	            const editor = Editor.create(null, null, this.definitionModel.root.properties, null, rootContext, this.services);
 	            editor.onValuesChanged.subscribe(() => {
@@ -1467,5 +1479,4 @@ context.notifyPropertiesChanged();
 	        return (step, context, definition) => {
-	            const definitionContext = sequentialWorkflowEditorModel.DefinitionContext.createForStep(step, definition, this.definitionModel, this.definitionWalker);
+	            const definitionContext = sequentialWorkflowEditorModel.DefinitionContext.createForStep(step, definition, this.definitionModel, this.definitionWalker, this.i18n);
 	            const stepModel = this.definitionModel.steps[step.type];
-	            const typeClassName = stepModel.type;
 	            const propertyModels = [stepModel.name, ...stepModel.properties];
@@ -1484,3 +1495,3 @@ const headerData = this.configuration.isHeaderHidden
 	            }
-	            const editor = Editor.create(headerData, validator, propertyModels, definitionContext, this.services, typeClassName);
+	            const editor = Editor.create(headerData, validator, propertyModels, stepModel.type, definitionContext, this.services);
 	            editor.onValuesChanged.subscribe((paths) => {
@@ -1523,3 +1534,3 @@ const isNameChanged = paths.some(path => path.equals(stepModel.name.value.path));
 	        categories.forEach((category) => {
-	            const name = category !== null && category !== void 0 ? category : 'Others';
+	            const name = category !== null && category !== void 0 ? category : this.i18n('toolbox.defaultGroupName', 'Others');
 	            const groupStepModels = stepModels.filter(step => step.category === category);
@@ -1526,0 +1537,0 @@ const groupSteps = groupStepModels.map(step => this.activateStep(step.type));

lib/esm/index.js

@@ -1,2 +0,2 @@
-import { SimpleEvent, DefaultValueContext, GeneratedStringContext, stringDictionaryValueModelId, sequenceValueModelId, branchesValueModelId, ValueContext, PropertyValidatorContext, ModelActivator, DefinitionValidator, DefinitionContext, StepValidatorContext } from 'sequential-workflow-editor-model';
+import { SimpleEvent, DefaultValueContext, GeneratedStringContext, stringDictionaryValueModelId, sequenceValueModelId, branchesValueModelId, ValueContext, PropertyValidatorContext, defaultI18n, ModelActivator, DefinitionValidator, DefinitionContext, StepValidatorContext } from 'sequential-workflow-editor-model';
 import { DefinitionWalker } from 'sequential-workflow-model';
@@ -155,3 +155,3 @@
             items.forEach((item, index) => {
-                const component = itemComponentFactory(item);
+                const component = itemComponentFactory(item, context.i18n);
                 component.onItemChanged.subscribe(item => onItemChanged(item, index));
@@ -491,3 +491,3 @@ component.onDeleteClicked.subscribe(() => onItemDeleted(index));
     const input = prependedInputComponent('$', inputComponent(variable.name, {
-        placeholder: 'Variable name'
+        placeholder: context.i18n('variableDefinitions.namePlaceholder', 'Variable name')
     }));
@@ -502,3 +502,3 @@ input.onChanged.subscribe(onNameChanged);
     typeSelect.onSelected.subscribe(onTypeChanged);
-    const deleteButton = buttonComponent('Delete', {
+    const deleteButton = buttonComponent(context.i18n('variableDefinitions.delete', 'Delete'), {
         size: 'small',
@@ -583,3 +583,6 @@ theme: 'secondary',
     });
-    select.setValues(['- Select -', ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))]);
+    select.setValues([
+        context.i18n('nullableVariable.select', '- Select -'),
+        ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))
+    ]);
     if (startValue) {
@@ -627,3 +630,3 @@ select.selectIndex(variables.findIndex(variable => variable.name === startValue.name) + 1);
 
-function anyVariableItemComponent(variable) {
+function anyVariableItemComponent(variable, i18n) {
     function validate(error) {
@@ -636,3 +639,3 @@ validation.setError(error);
     name.innerText = formatVariableNameWithType(variable.name, variable.type);
-    const deleteButton = buttonComponent('Delete', {
+    const deleteButton = buttonComponent(i18n('anyVariable.delete', 'Delete'), {
         size: 'small',
@@ -669,3 +672,3 @@ theme: 'secondary',
         const variableNames = variables.map(variable => formatVariableName(variable.name));
-        variableSelect.setValues(['- Select -', ...variableNames]);
+        variableSelect.setValues([context.i18n('anyVariable.select', '- Select -'), ...variableNames]);
     }
@@ -691,3 +694,3 @@ function onAddClicked() {
     let variables = null;
-    const addButton = buttonComponent('Add variable', {
+    const addButton = buttonComponent(context.i18n('anyVariable.addVariable', 'Add variable'), {
         icon: Icons.add
@@ -723,3 +726,3 @@ });
     const list = dynamicListComponent(context.getValue().variables, anyVariableItemComponent, context, {
-        emptyMessage: 'No variables selected'
+        emptyMessage: context.i18n('anyVariables.noVariablesSelected', 'No variables selected')
     });
@@ -785,3 +788,5 @@ list.onChanged.subscribe(onChanged);
     });
-    subModelSelect.setValues(context.model.subModels.map(model => model.label));
+    subModelSelect.setValues(context.model.subModels.map(model => {
+        return context.i18n(`dynamic.${model.id}.label`, model.label);
+    }));
     subModelSelect.selectIndex(context.model.subModels.findIndex(model => model.id === startValue.modelId));
@@ -853,3 +858,6 @@ subModelSelect.onSelected.subscribe(onTypeChanged);
     });
-    select.setValues(['- Select -', ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))]);
+    select.setValues([
+        context.i18n('nullableAnyVariable.select', '- Select -'),
+        ...variables.map(variable => formatVariableNameWithType(variable.name, variable.type))
+    ]);
     if (startValue) {
@@ -883,3 +891,3 @@ select.selectIndex(variables.findIndex(variable => variable.name === startValue.name) + 1);
     });
-    select.setValues(['False', 'True']);
+    select.setValues([context.i18n('boolean.false', 'False'), context.i18n('boolean.true', 'True')]);
     select.selectIndex(context.getValue() ? 1 : 0);
@@ -927,3 +935,3 @@ select.onSelected.subscribe(onSelected);
 
-function stringDictionaryItemComponent(item) {
+function stringDictionaryItemComponent(item, i18n) {
     function validate(error) {
@@ -938,10 +946,10 @@ validation.setError(error);
     const keyInput = inputComponent(item.key, {
-        placeholder: 'Key'
+        placeholder: i18n('stringDictionary.key', 'Key')
     });
     keyInput.onChanged.subscribe(onChanged);
     const valueInput = inputComponent(item.value, {
-        placeholder: 'Value'
+        placeholder: i18n('stringDictionary.value', 'Value')
     });
     valueInput.onChanged.subscribe(onChanged);
-    const deleteButton = buttonComponent('Delete', {
+    const deleteButton = buttonComponent(i18n('stringDictionary.delete', 'Delete'), {
         size: 'small',
@@ -982,7 +990,7 @@ theme: 'secondary',
     const list = dynamicListComponent(context.getValue().items, stringDictionaryItemComponent, context, {
-        emptyMessage: 'No items'
+        emptyMessage: context.i18n('stringDictionary.noItems', 'No items')
     });
     list.onChanged.subscribe(onChanged);
     const container = valueEditorContainerComponent([list.view]);
-    const addButton = buttonComponent('Add item', {
+    const addButton = buttonComponent(context.i18n('stringDictionary.addItem', 'Add item'), {
         size: 'small',
@@ -1092,4 +1100,4 @@ icon: Icons.add
 class PropertyEditor {
-    static create(propertyModel, definitionContext, editorServices) {
-        const valueContext = ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext);
+    static create(propertyModel, stepType, definitionContext, editorServices) {
+        const valueContext = ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
         const valueEditorFactory = editorServices.valueEditorFactoryResolver.resolve(propertyModel.value.id, propertyModel.value.editorId);
@@ -1108,3 +1116,4 @@ const valueEditor = valueEditorFactory(valueContext, editorServices);
         });
-        label.innerText = propertyModel.label;
+        const i18nPrefix = stepType ? `step.${stepType}.property:` : 'root.property:';
+        label.innerText = editorServices.i18n(i18nPrefix + propertyModel.path.toString(), propertyModel.label);
         header.appendChild(label);
@@ -1133,3 +1142,3 @@ view.appendChild(header);
         if (propertyModel.validator) {
-            const valueContext = ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext);
+            const valueContext = ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
             const validatorContext = PropertyValidatorContext.create(valueContext);
@@ -1168,11 +1177,12 @@ validationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
 class EditorHeader {
-    static create(data) {
+    static create(data, stepType, i18n) {
         const view = Html.element('div', { class: 'swe-editor-header' });
         const title = Html.element('h3', { class: 'swe-editor-header-title' });
-        title.textContent = data.label;
+        title.textContent = i18n(`step.${stepType}.name`, data.label);
         view.appendChild(title);
         if (data.description) {
-            const description = Html.element('p', { class: 'swe-editor-header-description' });
-            appendMultilineText(description, data.description);
-            view.appendChild(description);
+            const description = i18n(`step.${stepType}.description`, data.description);
+            const p = Html.element('p', { class: 'swe-editor-header-description' });
+            appendMultilineText(p, description);
+            view.appendChild(p);
         }
@@ -1187,7 +1197,7 @@ return new EditorHeader(view);
 class Editor {
-    static create(headerData, validator, propertyModels, definitionContext, editorServices, typeClassName) {
+    static create(headerData, validator, propertyModels, stepType, definitionContext, editorServices) {
         const root = document.createElement('div');
-        root.className = `swe-editor swe-type-${typeClassName}`;
+        root.className = `swe-editor swe-type-${stepType !== null && stepType !== void 0 ? stepType : 'root'}`;
         if (headerData) {
-            const header = EditorHeader.create(headerData);
+            const header = EditorHeader.create(headerData, stepType !== null && stepType !== void 0 ? stepType : 'root', editorServices.i18n);
             root.appendChild(header.view);
@@ -1205,3 +1215,3 @@ }
             }
-            const propertyEditor = PropertyEditor.create(propertyModel, definitionContext, editorServices);
+            const propertyEditor = PropertyEditor.create(propertyModel, stepType, definitionContext, editorServices);
             root.appendChild(propertyEditor.view);
@@ -1245,10 +1255,11 @@ editors.set(propertyModel, propertyEditor);
     static create(definitionModel, configuration) {
-        var _a;
+        var _a, _b;
         const definitionWalker = (_a = configuration.definitionWalker) !== null && _a !== void 0 ? _a : new DefinitionWalker();
+        const i18n = (_b = configuration.i18n) !== null && _b !== void 0 ? _b : defaultI18n;
         const activator = ModelActivator.create(definitionModel, configuration.uidGenerator);
         const validator = DefinitionValidator.create(definitionModel, definitionWalker);
         const valueEditorFactoryResolver = ValueEditorFactoryResolver.create(configuration.extensions);
-        return new EditorProvider(activator, validator, definitionModel, definitionWalker, valueEditorFactoryResolver, configuration);
+        return new EditorProvider(activator, validator, definitionModel, definitionWalker, i18n, valueEditorFactoryResolver, configuration);
     }
-    constructor(activator, validator, definitionModel, definitionWalker, valueEditorFactoryResolver, configuration) {
+    constructor(activator, validator, definitionModel, definitionWalker, i18n, valueEditorFactoryResolver, configuration) {
         this.activator = activator;
@@ -1258,2 +1269,3 @@ this.validator = validator;
         this.definitionWalker = definitionWalker;
+        this.i18n = i18n;
         this.valueEditorFactoryResolver = valueEditorFactoryResolver;
@@ -1263,3 +1275,4 @@ this.configuration = configuration;
             activator: this.activator,
-            valueEditorFactoryResolver: this.valueEditorFactoryResolver
+            valueEditorFactoryResolver: this.valueEditorFactoryResolver,
+            i18n: this.i18n
         };
@@ -1269,5 +1282,4 @@ }
         return (definition, context) => {
-            const rootContext = DefinitionContext.createForRoot(definition, this.definitionModel, this.definitionWalker);
-            const typeClassName = 'root';
-            const editor = Editor.create(null, null, this.definitionModel.root.properties, rootContext, this.services, typeClassName);
+            const rootContext = DefinitionContext.createForRoot(definition, this.definitionModel, this.definitionWalker, this.i18n);
+            const editor = Editor.create(null, null, this.definitionModel.root.properties, null, rootContext, this.services);
             editor.onValuesChanged.subscribe(() => {
@@ -1281,5 +1293,4 @@ context.notifyPropertiesChanged();
         return (step, context, definition) => {
-            const definitionContext = DefinitionContext.createForStep(step, definition, this.definitionModel, this.definitionWalker);
+            const definitionContext = DefinitionContext.createForStep(step, definition, this.definitionModel, this.definitionWalker, this.i18n);
             const stepModel = this.definitionModel.steps[step.type];
-            const typeClassName = stepModel.type;
             const propertyModels = [stepModel.name, ...stepModel.properties];
@@ -1298,3 +1309,3 @@ const headerData = this.configuration.isHeaderHidden
             }
-            const editor = Editor.create(headerData, validator, propertyModels, definitionContext, this.services, typeClassName);
+            const editor = Editor.create(headerData, validator, propertyModels, stepModel.type, definitionContext, this.services);
             editor.onValuesChanged.subscribe((paths) => {
@@ -1337,3 +1348,3 @@ const isNameChanged = paths.some(path => path.equals(stepModel.name.value.path));
         categories.forEach((category) => {
-            const name = category !== null && category !== void 0 ? category : 'Others';
+            const name = category !== null && category !== void 0 ? category : this.i18n('toolbox.defaultGroupName', 'Others');
             const groupStepModels = stepModels.filter(step => step.category === category);
@@ -1340,0 +1351,0 @@ const groupSteps = groupStepModels.map(step => this.activateStep(step.type));

lib/index.d.ts

@@ -1,2 +0,2 @@
-import { SimpleEvent, ValueContext, ValidationResult, ValueType, SimpleEventListener, ValueModel, ModelActivator, StringValueModel, UidGenerator, DefinitionModel } from 'sequential-workflow-editor-model';
+import { SimpleEvent, I18n, ValueContext, ValidationResult, ValueType, SimpleEventListener, ValueModel, ModelActivator, StringValueModel, UidGenerator, DefinitionModel } from 'sequential-workflow-editor-model';
 import { DefinitionWalker, Definition, Step } from 'sequential-workflow-model';
@@ -34,3 +34,3 @@
 }
-declare function dynamicListComponent<TItem, TItemComponent extends DynamicListItemComponent<TItem> = DynamicListItemComponent<TItem>>(initialItems: TItem[], itemComponentFactory: (item: TItem) => TItemComponent, context: ValueContext, configuration?: DynamicListComponentConfiguration<TItem>): DynamicListComponent<TItem, TItemComponent>;
+declare function dynamicListComponent<TItem, TItemComponent extends DynamicListItemComponent<TItem> = DynamicListItemComponent<TItem>>(initialItems: TItem[], itemComponentFactory: (item: TItem, i18n: I18n) => TItemComponent, context: ValueContext, configuration?: DynamicListComponentConfiguration<TItem>): DynamicListComponent<TItem, TItemComponent>;
 
@@ -155,2 +155,3 @@ interface InputComponent extends Component {
     activator: ModelActivator;
+    i18n: I18n;
 }
@@ -164,2 +165,3 @@
     definitionWalker?: DefinitionWalker;
+    i18n?: I18n;
     isHeaderHidden?: boolean;
@@ -194,2 +196,3 @@ extensions?: EditorExtension[];
     private readonly definitionWalker;
+    private readonly i18n;
     private readonly valueEditorFactoryResolver;
@@ -196,0 +199,0 @@ private readonly configuration;

package.json

 {
 	"name": "sequential-workflow-editor",
-	"version": "0.11.3",
+	"version": "0.12.0",
 	"type": "module",
@@ -49,7 +49,7 @@ "main": "./lib/esm/index.js",
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.11.3",
+		"sequential-workflow-editor-model": "^0.12.0",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.11.3",
+		"sequential-workflow-editor-model": "^0.12.0",
 		"sequential-workflow-model": "^0.2.0"
@@ -56,0 +56,0 @@ },

README.md

@@ -18,2 +18,4 @@ ![Sequential Workflow Editor](.github/cover.png)
 * [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)
+* [🚩 Internationalization](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/i18n.html)
+* [🚢  Vanilla JS](https://nocode-js.github.io/sequential-workflow-editor/vanilla-js-app/vanilla-js.html)
 
@@ -20,0 +22,0 @@ Pro:

No alert changes

Improved metrics

Total package byte prevSize

177705

increased by2.45%

Lines of code

4513

increased by0.8%

Number of lines in readme file

136

increased by1.49%

Dependency changes

• + Addedsequential-workflow-editor-model@0.12.1(transitive)

• - Removedsequential-workflow-editor-model@0.11.3(transitive)

• Updatedsequential-workflow-editor-model@^0.12.0