sequential-workflow-designer 0.19.3 → 0.20.0

package/lib/esm/index.js

@@ -599,13 +599,15 @@ class StepTypeValidator {
 }
 
 class ToolboxDataProvider {
-    constructor(iconProvider, configuration) {
+    constructor(iconProvider, i18n, configuration) {
         this.iconProvider = iconProvider;
+        this.i18n = i18n;
         this.configuration = configuration;
         this.createItemData = (step) => {
             StepTypeValidator.validate(step.type);
             const iconUrl = this.iconProvider.getIconUrl(step);
-            const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const rawLabel = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const label = this.i18n(`toolbox.item.${step.type}.label`, rawLabel);
             const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
             const lowerCaseLabel = label.toLowerCase();
             return {
@@ -703,10 +705,10 @@ class DesignerApi {
         const workspace = new WorkspaceApi(context.state, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
-        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
-        return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker);
+        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
+        return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
     }
-    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
+    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
@@ -714,6 +716,7 @@ class DesignerApi {
         this.viewport = viewport;
         this.pathBar = pathBar;
         this.definitionWalker = definitionWalker;
+        this.i18n = i18n;
     }
 }
 
@@ -916,6 +919,7 @@ class StepComponentViewContextFactory {
     static create(stepContext, componentContext) {
         return {
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
+            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
             createSequenceComponent: (parentElement, sequence) => {
                 const sequenceContext = {
                     sequence,
@@ -925,7 +929,8 @@ class StepComponentViewContextFactory {
                 };
                 return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
             },
-            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
+            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
+            i18n: componentContext.i18n
         };
     }
 }
@@ -944,18 +949,19 @@ class StepComponentFactory {
 }
 
 class ComponentContext {
-    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
+    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, services) {
         const validator = new DefinitionValidator(validatorConfiguration, state);
         const iconProvider = new IconProvider(stepsConfiguration);
         const placeholderController = services.placeholderController.create();
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
+        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
     }
-    constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
+    constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
         this.stepComponentFactory = stepComponentFactory;
+        this.i18n = i18n;
         this.services = services;
     }
 }
@@ -1137,6 +1143,15 @@ class ValidationErrorBadgeExtension {
     }
 }
 
+class ComponentDom {
+    static stepG(componentClassName, type, id) {
+        return Dom.svg('g', {
+            class: `sqd-step-${componentClassName} sqd-type-${type}`,
+            'data-step-id': id
+        });
+    }
+}
+
 class InputView {
     static createRectInput(parent, x, y, size, iconSize, iconUrl) {
         const g = Dom.svg('g');
@@ -1342,43 +1357,6 @@ function drawLine(parent, x1, y1, x2, y2) {
     return line;
 }
 
-class RectPlaceholderView {
-    static create(parent, width, height, radius, iconSize, direction) {
-        const g = Dom.svg('g', {
-            visibility: 'hidden',
-            class: 'sqd-placeholder'
-        });
-        parent.appendChild(g);
-        const rect = Dom.svg('rect', {
-            class: 'sqd-placeholder-rect',
-            width,
-            height,
-            rx: radius,
-            ry: radius
-        });
-        g.appendChild(rect);
-        if (direction) {
-            const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
-            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
-            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
-        }
-        parent.appendChild(g);
-        return new RectPlaceholderView(rect, g);
-    }
-    constructor(rect, g) {
-        this.rect = rect;
-        this.g = g;
-    }
-    setIsHover(isHover) {
-        Dom.toggleClass(this.g, isHover, 'sqd-hover');
-    }
-    setIsVisible(isVisible) {
-        Dom.attrs(this.g, {
-            visibility: isVisible ? 'visible' : 'hidden'
-        });
-    }
-}
-
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1507,11 +1485,10 @@ class DefaultSequenceComponent {
 
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-container sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('container', step.type, step.id);
     parentElement.appendChild(g);
-    const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
+    const name = viewContext.getStepName();
+    const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
     const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
     const halfOfWidestElement = labelView.width / 2;
     const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1555,9 +1532,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
 
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-switch sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('switch', step.type, step.id);
     parent.appendChild(g);
     const branchNames = Object.keys(step.branches);
     const branchComponents = branchNames.map(branchName => {
@@ -1565,9 +1540,11 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
     });
     const branchLabelViews = branchNames.map(branchName => {
         const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-        return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
+        const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
+        return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
     });
-    const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
+    const name = viewContext.getStepName();
+    const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
     let prevOffsetX = 0;
     const branchSizes = branchComponents.map((component, i) => {
         const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1658,9 +1635,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
 
 const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-task sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('task', step.type, step.id);
     parentElement.appendChild(g);
     const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
     const text = Dom.svg('text', {
@@ -1668,7 +1643,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         y: boxHeight / 2,
         class: 'sqd-step-task-text'
     });
-    text.textContent = step.name;
+    text.textContent = viewContext.getStepName();
     g.appendChild(text);
     const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
     const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -1940,6 +1915,43 @@ class StepExtensionResolver {
     }
 }
 
+class RectPlaceholderView {
+    static create(parent, width, height, radius, iconSize, direction) {
+        const g = Dom.svg('g', {
+            visibility: 'hidden',
+            class: 'sqd-placeholder'
+        });
+        parent.appendChild(g);
+        const rect = Dom.svg('rect', {
+            class: 'sqd-placeholder-rect',
+            width,
+            height,
+            rx: radius,
+            ry: radius
+        });
+        g.appendChild(rect);
+        if (direction) {
+            const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
+            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
+        }
+        parent.appendChild(g);
+        return new RectPlaceholderView(rect, g);
+    }
+    constructor(rect, g) {
+        this.rect = rect;
+        this.g = g;
+    }
+    setIsHover(isHover) {
+        Dom.toggleClass(this.g, isHover, 'sqd-hover');
+    }
+    setIsVisible(isVisible) {
+        Dom.attrs(this.g, {
+            visibility: isVisible ? 'visible' : 'hidden'
+        });
+    }
+}
+
 class RectPlaceholder {
     static create(parent, size, direction, sequence, index, configuration) {
         const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -2467,7 +2479,7 @@ class WorkspaceControllerWrapper {
 
 class DesignerContext {
     static create(parent, startDefinition, configuration, services) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(parent);
         const isReadonly = !!configuration.isReadonly;
@@ -2479,22 +2491,24 @@ class DesignerContext {
         const behaviorController = new BehaviorController();
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
+        const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
         const stateModifier = StateModifier.create(definitionWalker, state, configuration);
         const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
-        const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
-        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
+        const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
     }
-    constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
         this.services = services;
         this.componentContext = componentContext;
         this.definitionWalker = definitionWalker;
+        this.i18n = i18n;
         this.stateModifier = stateModifier;
         this.layoutController = layoutController;
         this.workspaceController = workspaceController;
@@ -2907,8 +2921,9 @@ class ContextMenuController {
 }
 
 class ContextMenuItemsBuilder {
-    constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
+    constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
         this.viewportApi = viewportApi;
+        this.i18n = i18n;
         this.stateModifier = stateModifier;
         this.state = state;
         this.customMenuItemsProvider = customMenuItemsProvider;
@@ -2919,15 +2934,16 @@ class ContextMenuItemsBuilder {
             const ssc = commandOrNull;
             const step = ssc.component.step;
             const parentSequence = ssc.component.parentSequence;
+            const name = this.i18n(`step.${step.type}.name`, step.name);
             items.push({
-                label: step.name,
+                label: name,
                 order: 0
             });
             this.tryAppendCustomItems(items, step, parentSequence);
             if (this.stateModifier.isSelectable(step, parentSequence)) {
                 if (this.state.selectedStepId === step.id) {
                     items.push({
-                        label: `Unselect`,
+                        label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
                             this.state.setSelectedStepId(null);
@@ -2936,7 +2952,7 @@ class ContextMenuItemsBuilder {
                 }
                 else {
                     items.push({
-                        label: 'Select',
+                        label: this.i18n('contextMenu.select', 'Select'),
                         order: 20,
                         callback: () => {
                             this.stateModifier.trySelectStepById(step.id);
@@ -2947,7 +2963,7 @@ class ContextMenuItemsBuilder {
             if (!this.state.isReadonly) {
                 if (this.stateModifier.isDeletable(step.id)) {
                     items.push({
-                        label: 'Delete',
+                        label: this.i18n('contextMenu.delete', 'Delete'),
                         order: 30,
                         callback: () => {
                             this.stateModifier.tryDelete(step.id);
@@ -2956,7 +2972,7 @@ class ContextMenuItemsBuilder {
                 }
                 if (this.stateModifier.isDuplicable(step, parentSequence)) {
                     items.push({
-                        label: 'Duplicate',
+                        label: this.i18n('contextMenu.duplicate', 'Duplicate'),
                         order: 40,
                         callback: () => {
                             this.stateModifier.tryDuplicate(step, parentSequence);
@@ -2969,7 +2985,7 @@ class ContextMenuItemsBuilder {
             this.tryAppendCustomItems(items, null, this.state.definition.sequence);
         }
         items.push({
-            label: 'Reset view',
+            label: this.i18n('contextMenu.resetView', 'Reset view'),
             order: 50,
             callback: () => {
                 this.viewportApi.resetViewport();
@@ -2994,7 +3010,7 @@ class Workspace {
         const view = WorkspaceView.create(parent, designerContext.componentContext);
         const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
         const wheelController = designerContext.services.wheelController.create(api.workspace);
-        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
+        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
             : undefined);
         const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3241,28 +3257,28 @@ class DefaultDraggedComponentExtension {
 }
 
 class ControlBarView {
-    static create(parent, isUndoRedoSupported) {
+    static create(parent, isUndoRedoSupported, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-control-bar'
         });
-        const resetButton = createButton(Icons.center, 'Reset view');
+        const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
         root.appendChild(resetButton);
-        const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
+        const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
         root.appendChild(zoomInButton);
-        const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
+        const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
         root.appendChild(zoomOutButton);
         let undoButton = null;
         let redoButton = null;
         if (isUndoRedoSupported) {
-            undoButton = createButton(Icons.undo, 'Undo');
+            undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
             root.appendChild(undoButton);
-            redoButton = createButton(Icons.redo, 'Redo');
+            redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
             root.appendChild(redoButton);
         }
-        const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
+        const disableDragButton = createButton(Icons.move, i18n('controlBar.turnOnOffDragAndDrop', 'Turn on/off drag and drop'));
         disableDragButton.classList.add('sqd-disabled');
         root.appendChild(disableDragButton);
-        const deleteButton = createButton(Icons.delete, 'Delete selected step');
+        const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
         deleteButton.classList.add('sqd-delete');
         deleteButton.classList.add('sqd-hidden');
         root.appendChild(deleteButton);
@@ -3343,7 +3359,7 @@ function createButton(d, title) {
 class ControlBar {
     static create(parent, api) {
         const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
-        const view = ControlBarView.create(parent, isUndoRedoSupported);
+        const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
         const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
         view.bindResetButtonClick(() => bar.onResetButtonClicked());
         view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3473,19 +3489,16 @@ class KeyboardDaemonExtension {
 }
 
 class SmartEditorView {
-    static create(parent, api, configuration) {
+    static create(parent, api, i18n, configuration) {
         const root = Dom.element('div', {
             class: 'sqd-smart-editor'
         });
         const toggle = Dom.element('div', {
             class: 'sqd-smart-editor-toggle',
-            title: 'Toggle editor'
+            title: i18n('smartEditor.toggle', 'Toggle editor')
         });
         parent.appendChild(toggle);
         parent.appendChild(root);
-        if (configuration.globalEditorProvider) {
-            throw new Error('globalEditorProvider is renamed to rootEditorProvider');
-        }
         const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
         return new SmartEditorView(root, toggle, editor);
     }
@@ -3516,7 +3529,7 @@ class SmartEditorView {
 
 class SmartEditor {
     static create(parent, api, configuration) {
-        const view = SmartEditorView.create(parent, api.editor, configuration);
+        const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
         const editor = new SmartEditor(view, api.editor, api.workspace);
         editor.updateVisibility();
         view.bindToggleClick(() => editor.onToggleClicked());
@@ -3759,7 +3772,7 @@ class ToolboxItem {
 }
 
 class ToolboxView {
-    static create(parent, api) {
+    static create(parent, api, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-toolbox'
         });
@@ -3769,14 +3782,14 @@ class ToolboxView {
         const headerTitle = Dom.element('div', {
             class: 'sqd-toolbox-header-title'
         });
-        headerTitle.innerText = 'Toolbox';
+        headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
         const body = Dom.element('div', {
             class: 'sqd-toolbox-body'
         });
         const filterInput = Dom.element('input', {
             class: 'sqd-toolbox-filter',
             type: 'text',
-            placeholder: 'Search...'
+            placeholder: i18n('toolbox.search', 'Search...')
         });
         root.appendChild(header);
         root.appendChild(body);
@@ -3836,9 +3849,9 @@ class ToolboxView {
 }
 
 class Toolbox {
-    static create(root, api) {
+    static create(root, api, i18n) {
         const allGroups = api.getAllGroups();
-        const view = ToolboxView.create(root, api);
+        const view = ToolboxView.create(root, api, i18n);
         const toolbox = new Toolbox(view, api, allGroups);
         toolbox.render();
         toolbox.onIsCollapsedChanged();
@@ -3873,7 +3886,7 @@ class Toolbox {
 
 class ToolboxExtension {
     create(root, api) {
-        return Toolbox.create(root, api.toolbox);
+        return Toolbox.create(root, api.toolbox, api.i18n);
     }
 }
 
@@ -4518,4 +4531,4 @@ class StepsDesignerExtension {
     }
 }
 
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, CustomActionController, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

package/lib/index.d.ts

@@ -272,8 +272,9 @@ declare class ComponentContext {
     readonly iconProvider: IconProvider;
     readonly placeholderController: PlaceholderController;
     readonly stepComponentFactory: StepComponentFactory;
+    readonly i18n: I18n;
     readonly services: Services;
-    static create(stepsConfiguration: StepsConfiguration, validatorConfiguration: ValidatorConfiguration | undefined, state: DesignerState, stepExtensionResolver: StepExtensionResolver, services: Services): ComponentContext;
+    static create(stepsConfiguration: StepsConfiguration, validatorConfiguration: ValidatorConfiguration | undefined, state: DesignerState, stepExtensionResolver: StepExtensionResolver, i18n: I18n, services: Services): ComponentContext;
     private constructor();
 }
 
@@ -342,6 +343,7 @@ declare class DesignerContext {
     readonly services: Services;
     readonly componentContext: ComponentContext;
     readonly definitionWalker: DefinitionWalker;
+    readonly i18n: I18n;
     readonly stateModifier: StateModifier;
     readonly layoutController: LayoutController;
     readonly workspaceController: WorkspaceControllerWrapper;
@@ -349,7 +351,7 @@ declare class DesignerContext {
     readonly customActionController: CustomActionController;
     readonly historyController: HistoryController | undefined;
     static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
-    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
+    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
     setWorkspaceController(controller: WorkspaceController): void;
 }
 
@@ -405,8 +407,9 @@ declare class PathBarApi {
 
 declare class ToolboxDataProvider {
     private readonly iconProvider;
+    private readonly i18n;
     private readonly configuration;
-    constructor(iconProvider: IconProvider, configuration: ToolboxConfiguration | false);
+    constructor(iconProvider: IconProvider, i18n: I18n, configuration: ToolboxConfiguration | false);
     getAllGroups(): ToolboxGroupData[];
     private readonly createItemData;
     applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
@@ -475,6 +478,7 @@ declare class DesignerApi {
     readonly viewport: ViewportApi;
     readonly pathBar: PathBarApi;
     readonly definitionWalker: DefinitionWalker;
+    readonly i18n: I18n;
     static create(context: DesignerContext): DesignerApi;
     private constructor();
 }
@@ -509,6 +513,10 @@ declare class ValidationErrorBadgeExtension implements BadgeExtension {
     readonly createStartValue: () => boolean;
 }
 
+declare class ComponentDom {
+    static stepG(componentClassName: string, type: string, id: string): SVGGElement;
+}
+
 declare class InputView {
     private readonly root;
     static createRectInput(parent: SVGElement, x: number, y: number, size: number, iconSize: number, iconUrl: string | null): InputView;
@@ -555,15 +563,6 @@ declare class RegionView {
     setIsSelected(isSelected: boolean): void;
 }
 
-declare class RectPlaceholderView implements PlaceholderView {
-    readonly rect: SVGElement;
-    readonly g: SVGGElement;
-    static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
-    private constructor();
-    setIsHover(isHover: boolean): void;
-    setIsVisible(isVisible: boolean): void;
-}
-
 declare class DefaultSequenceComponentView implements ComponentView {
     readonly g: SVGGElement;
     readonly width: number;
@@ -686,6 +685,15 @@ interface RectPlaceholderConfiguration {
     iconSize: number;
 }
 
+declare class RectPlaceholderView implements PlaceholderView {
+    readonly rect: SVGElement;
+    readonly g: SVGGElement;
+    static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
+    private constructor();
+    setIsHover(isHover: boolean): void;
+    setIsVisible(isVisible: boolean): void;
+}
+
 declare class RectPlaceholder implements Placeholder {
     readonly view: RectPlaceholderView;
     readonly parentSequence: Sequence;
@@ -720,9 +728,11 @@ interface StepExtension<S extends Step = Step> {
 }
 type StepComponentViewFactory = StepExtension['createComponentView'];
 interface StepComponentViewContext {
+    getStepName(): string;
     getStepIconUrl(): string | null;
     createSequenceComponent(parentElement: SVGElement, sequence: Sequence): SequenceComponent;
     createPlaceholderForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
+    i18n: I18n;
 }
 interface StepContext<S extends Step = Step> {
     parentSequence: Sequence;
@@ -888,8 +898,13 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      * @description Custom generator of unique identifiers.
      */
     uidGenerator?: UidGenerator;
+    /**
+     * @description Custom translation function.
+     */
+    i18n?: I18n;
 }
 type UidGenerator = () => string;
+type I18n = (key: string, defaultValue: string) => string;
 type CustomActionHandler = (action: CustomAction, step: Step | null, sequence: Sequence, context: CustomActionHandlerContext) => void;
 interface CustomAction {
     type: string;
@@ -1210,4 +1225,4 @@ declare class StepsDesignerExtension implements DesignerExtension {
     protected constructor(steps: StepExtension<Step>[]);
 }
 
-export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.19.3",
+	"version": "0.20.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",