@siliconst/metaui 1.4.51 → 2.0.0

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/SingleBoundWidgetPlugin.ts

@@ -0,0 +1,218 @@
+/**
+ * @file SingleBoundWidgetPlugin.ts
+ * @description Shared abstract base class for the single-bound UI5 widgets — one control, one bound value
+ * property, one change event — backing `BooleanPlugin`, `SwitchPlugin`, `SliderPlugin`, `StepInputPlugin`
+ * and `RatingIndicatorPlugin`.
+ */
+
+import { BasePlugin } from "./BasePlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import CheckBox, { $CheckBoxSettings } from "sap/m/CheckBox";
+import Switch, { $SwitchSettings } from "sap/m/Switch";
+import Slider, { $SliderSettings } from "sap/m/Slider";
+import StepInput, { $StepInputSettings } from "sap/m/StepInput";
+import RatingIndicator, { $RatingIndicatorSettings } from "sap/m/RatingIndicator";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import { isEditableSupport, isEnabledSupport } from "../../utils/ControlDirectiveUtil";
+
+/**
+ * Union of the SAPUI5 control instances rendered by a `SingleBoundWidgetPlugin` subclass.
+ */
+export type SingleBoundWidgetInstance = CheckBox | Switch | Slider | StepInput | RatingIndicator;
+
+/**
+ * Constructor settings accepted by every single-bound widget control.
+ */
+export type SingleBoundWidgetSettings = $CheckBoxSettings &
+    $SwitchSettings &
+    $SliderSettings &
+    $StepInputSettings &
+    $RatingIndicatorSettings;
+
+/**
+ * Static configuration descriptor for a concrete `SingleBoundWidgetPlugin` subclass.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export interface ISingleBoundWidgetConfig {
+    /** The SAPUI5 control constructor used in edit mode. */
+    ControlClass: new (mSettings?: SingleBoundWidgetSettings) => SingleBoundWidgetInstance;
+    /** Name of the control property that carries the bound value (`selected`, `state`, `value`). */
+    valueProperty: string;
+    /** Name of the control event fired once the user has committed a new value (`select`, `change`). */
+    changeEvent: string;
+    /**
+     * Which interactivity property the control exposes. `sap.m.Switch` and `sap.m.Slider` have only
+     * `enabled`; the rest have `editable`. Declaring it here is what keeps the five widgets from
+     * drifting into inconsistent read-only behaviour.
+     */
+    editableProperty: "editable" | "enabled";
+    /**
+     * Reads the live value out of the rendered control, or returns `undefined` when the control
+     * cannot answer (destroyed, or a stand-in that does not implement the getter).
+     */
+    readValue: (control: Control) => unknown;
+    /**
+     * Converts a model value into the widget's own value domain, used only when `readValue` cannot
+     * answer. Defaults to the model value unchanged.
+     */
+    coerceModelValue?: (modelValue: unknown) => unknown;
+}
+
+/**
+ * Shared abstract base class for the five structurally identical single-bound widgets.
+ * Consolidates display-mode rendering, control construction, value binding, the change-and-commit
+ * handler, `getValue`, and the editable half of `applyState`. Subclasses declare a
+ * {@link ISingleBoundWidgetConfig} and, where the widget has bounds or a scale, override
+ * {@link SingleBoundWidgetPlugin.buildExtraSettings} and
+ * {@link SingleBoundWidgetPlugin.applyExtraState}.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export abstract class SingleBoundWidgetPlugin extends BasePlugin {
+    protected abstract readonly widgetConfig: ISingleBoundWidgetConfig;
+
+    /**
+     * Renders the configured UI5 widget in edit mode, or a formatted `sap.m.Text` in display mode.
+     *
+     * @param metadata The specific JSON schema properties for this field.
+     * @param bindingPath The JSON path bound to this control.
+     * @param modelName The UI5 JSONModel name.
+     * @param engineScopeId The deterministic scope ID.
+     * @param onChange The callback fired on value change.
+     * @returns {Control} The configured widget or display text control.
+     */
+    public render(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string = "meta",
+        engineScopeId?: string,
+        onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void
+    ): Control {
+        this.initialize(metadata, bindingPath, modelName, onChange);
+
+        if (!this.isEditable) {
+            return this.createDisplayText(engineScopeId, bindingPath);
+        }
+
+        const cfg = this.widgetConfig;
+        const settings: SingleBoundWidgetSettings = {
+            id: this.generateStableId(engineScopeId, bindingPath),
+            ...this.buildExtraSettings(metadata)
+        };
+        // The bound property and the change event are named by the config, so they are merged in
+        // rather than written as literal keys. They still go through the constructor, because UI5
+        // only parses the `{model>/path}` binding shorthand while applying settings.
+        Object.assign(settings, {
+            [cfg.valueProperty]: this.generateBindingInfo(bindingPath, modelName),
+            [cfg.changeEvent]: (oEvent: Event) => {
+                const src = oEvent.getSource() as Control;
+                const liveValue = cfg.readValue(src);
+                if (liveValue !== undefined) {
+                    this.commitValue(src, liveValue);
+                }
+                this.notifyChange(src.getId());
+            }
+        });
+
+        const WidgetCtor = cfg.ControlClass;
+        const widget = new WidgetCtor(settings);
+        this.applyEditableProperty(widget);
+
+        this.control = widget;
+        this.applyCommonDirectives(this.control, metadata, modelName);
+        return this.control;
+    }
+
+    /**
+     * Returns the widget-specific constructor settings (bounds, step, scale, required indicator).
+     * The default widget has none.
+     *
+     * @param metadata The property metadata.
+     * @returns {SingleBoundWidgetSettings} Extra settings merged into the control constructor.
+     */
+    protected buildExtraSettings(metadata: IPropertyMetadata): SingleBoundWidgetSettings {
+        void metadata;
+        return {};
+    }
+
+    /**
+     * Applies the widget-specific half of `applyState` — everything beyond editability.
+     * The default widget has none.
+     *
+     * @param control The rendered widget control.
+     * @param metadata The current property metadata.
+     */
+    protected applyExtraState(control: Control, metadata: IPropertyMetadata): void {
+        void control;
+        void metadata;
+    }
+
+    /**
+     * Resolves the numeric increment for a stepped widget from `multipleOf`, then `ui.options.step`.
+     *
+     * @param metadata The property metadata.
+     * @returns {number} The resolved step, defaulting to 1.
+     */
+    protected resolveStep(metadata: IPropertyMetadata): number {
+        if (typeof metadata.multipleOf === "number") {
+            return metadata.multipleOf;
+        }
+        if (metadata.ui?.options && typeof metadata.ui.options.step === "number") {
+            return metadata.ui.options.step;
+        }
+        return 1;
+    }
+
+    /**
+     * Retrieves the current value from the rendered widget, falling back to the bound model value
+     * whenever the control cannot answer or the plugin is in display mode.
+     *
+     * @param sourceControl Optional runtime source control (e.g., cloned table cell).
+     * @returns {unknown} The current field value.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        const target = sourceControl ?? this.control;
+        const modelVal = this.getModelValue(target);
+        if (!this.isEditable || modelVal === null || modelVal === undefined) {
+            return modelVal;
+        }
+        const liveValue = target ? this.widgetConfig.readValue(target) : undefined;
+        if (liveValue !== undefined) {
+            return liveValue;
+        }
+        return this.widgetConfig.coerceModelValue ? this.widgetConfig.coerceModelValue(modelVal) : modelVal;
+    }
+
+    /**
+     * Applies dynamic `readOnly` state plus any widget-specific state to the rendered control.
+     */
+    protected applyState(): void {
+        if (!this.control || !this.metadata || !this.isEditable) {
+            return;
+        }
+        this.applyEditableProperty(this.control);
+        this.applyExtraState(this.control, this.metadata);
+    }
+
+    /**
+     * Writes the current effective editability onto whichever interactivity property the widget declares.
+     *
+     * @param widget The rendered widget control.
+     */
+    private applyEditableProperty(widget: Control): void {
+        const editable = this.isControlEditable();
+        if (this.widgetConfig.editableProperty === "enabled") {
+            if (isEnabledSupport(widget)) {
+                widget.setEnabled(editable);
+            }
+            return;
+        }
+        if (isEditableSupport(widget)) {
+            widget.setEditable(editable);
+        }
+    }
+}

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/SliderPlugin.ts

@@ -1,83 +1,64 @@
-/**
- * @file SliderPlugin.ts
- * @description Renders a sap.m.Slider for picking numbers in a range.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Slider from "sap/m/Slider";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering logic for numeric sliders.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class SliderPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.Slider` component.
-     * 
-     * @param fieldMetadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @param engineScopeId The deterministic scope ID.
-     * @param onChange The callback fired on value change.
-     * @returns {Control} The configured Slider control.
-     */
-    public render(fieldMetadata: IPropertyMetadata,  bindingPath: string,  modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        this.onChange = onChange;
-        this.metadata = fieldMetadata;
-        this.fieldKey = bindingPath.startsWith('/') ? bindingPath.substring(1) : bindingPath;
-        
-        if (!this.isEditable) {
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName)
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new Slider({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            enabled: !fieldMetadata.ui?.readOnly,
-            min: fieldMetadata.minimum !== undefined ? fieldMetadata.minimum : 0,
-            max: fieldMetadata.maximum !== undefined ? fieldMetadata.maximum : 100,
-            step: fieldMetadata.multipleOf !== undefined ? fieldMetadata.multipleOf : 1,
-            enableTickmarks: true,
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent as sap.ui.base.Event).getParameter("value");
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current slider value.
-     * @returns {unknown} The numeric value.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as Slider).getProperty('value') : 0;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            (this.control as Slider).setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file SliderPlugin.ts
+ * @description Renders a sap.m.Slider control for numeric range selection.
+ */
+
+import {
+    ISingleBoundWidgetConfig,
+    SingleBoundWidgetPlugin,
+    SingleBoundWidgetSettings
+} from "./SingleBoundWidgetPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Slider from "sap/m/Slider";
+import Control from "sap/ui/core/Control";
+
+/**
+ * Plugin responsible for rendering numeric range sliders (`sap.m.Slider`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class SliderPlugin extends SingleBoundWidgetPlugin {
+    protected readonly widgetConfig: ISingleBoundWidgetConfig = {
+        ControlClass: Slider,
+        valueProperty: "value",
+        changeEvent: "change",
+        editableProperty: "enabled",
+        readValue: (control: Control) =>
+            typeof (control as Slider).getValue === "function" ? (control as Slider).getValue() : undefined
+    };
+
+    /**
+     * Supplies the slider's bounds, step and tooltip affordances.
+     * A slider always needs a finite track, so the bounds fall back to 0..100 rather than to `undefined`.
+     *
+     * @param metadata The property metadata.
+     * @returns {SingleBoundWidgetSettings} The `sap.m.Slider` constructor settings.
+     */
+    protected override buildExtraSettings(metadata: IPropertyMetadata): SingleBoundWidgetSettings {
+        return {
+            min: metadata.minimum !== undefined ? metadata.minimum : 0,
+            max: metadata.maximum !== undefined ? metadata.maximum : 100,
+            step: this.resolveStep(metadata),
+            width: "100%",
+            showAdvancedTooltip: true,
+            inputsAsTooltips: true
+        };
+    }
+
+    /**
+     * Applies dynamic `min` and `max` state updates to the `Slider`.
+     *
+     * @param control The rendered `sap.m.Slider`.
+     * @param metadata The current property metadata.
+     */
+    protected override applyExtraState(control: Control, metadata: IPropertyMetadata): void {
+        const slider = control as Slider;
+        if (metadata.minimum !== undefined) {
+            slider.setMin(metadata.minimum);
+        }
+        if (metadata.maximum !== undefined) {
+            slider.setMax(metadata.maximum);
+        }
+    }
+}

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/StepInputPlugin.ts

@@ -1,89 +1,63 @@
-/**
- * @file StepInputPlugin.ts
- * @description Renders a sap.m.StepInput for numeric data requiring step increments.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import StepInput from "sap/m/StepInput";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering and logic for step-based numeric inputs.
- */
-export class StepInputPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.StepInput` component for numeric evaluation.
-     * 
-     * @param fieldMetadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @param engineScopeId The deterministic scope ID.
-     * @param onChange The callback fired on value change.
-     * @returns {Control} The configured StepInput control.
-     */
-    public render(fieldMetadata: IPropertyMetadata,  bindingPath: string,  modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        this.onChange = onChange;
-        this.metadata = fieldMetadata;
-        this.fieldKey = bindingPath.startsWith('/') ? bindingPath.substring(1) : bindingPath;
-
-        if (!this.isEditable) {
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName)
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        let precision: number | undefined = fieldMetadata.scale;
-        if (precision === undefined && fieldMetadata.multipleOf !== undefined) {
-            const stepStr = fieldMetadata.multipleOf.toString();
-            precision = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;
-        } else if (precision === undefined && fieldMetadata.type === "integer") {
-            precision = 0;
-        }
-
-        this.control = new StepInput({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            step: fieldMetadata.multipleOf !== undefined ? fieldMetadata.multipleOf : 1,
-            ...(precision !== undefined && { displayValuePrecision: precision }),
-            editable: !fieldMetadata.ui?.readOnly,
-            required: !!fieldMetadata.required,
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent.getParameter("value") as unknown) as number;
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current numeric state.
-     * @returns {unknown} The numeric value.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as StepInput).getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            const input = this.control as StepInput;
-            input.setEditable(!this.metadata.ui?.readOnly);
-            input.setRequired(!!this.metadata.required);
-        }
-    }
-}
+/**
+ * @file StepInputPlugin.ts
+ * @description Renders a sap.m.StepInput control for bounded numeric increments.
+ */
+
+import {
+    ISingleBoundWidgetConfig,
+    SingleBoundWidgetPlugin,
+    SingleBoundWidgetSettings
+} from "./SingleBoundWidgetPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import StepInput from "sap/m/StepInput";
+import Control from "sap/ui/core/Control";
+
+/**
+ * Plugin responsible for rendering numeric step inputs (`sap.m.StepInput`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class StepInputPlugin extends SingleBoundWidgetPlugin {
+    protected readonly widgetConfig: ISingleBoundWidgetConfig = {
+        ControlClass: StepInput,
+        valueProperty: "value",
+        changeEvent: "change",
+        editableProperty: "editable",
+        readValue: (control: Control) =>
+            typeof (control as StepInput).getValue === "function" ? (control as StepInput).getValue() : undefined
+    };
+
+    /**
+     * Supplies the step input's bounds, increment and required indicator. Unlike the slider, an absent
+     * bound stays `undefined` so the control keeps its own unbounded default rather than clamping to 0..100.
+     *
+     * @param metadata The property metadata.
+     * @returns {SingleBoundWidgetSettings} The `sap.m.StepInput` constructor settings.
+     */
+    protected override buildExtraSettings(metadata: IPropertyMetadata): SingleBoundWidgetSettings {
+        return {
+            min: metadata.minimum !== undefined ? metadata.minimum : undefined,
+            max: metadata.maximum !== undefined ? metadata.maximum : undefined,
+            step: this.resolveStep(metadata),
+            required: this.isRequired()
+        };
+    }
+
+    /**
+     * Applies dynamic `required`, `min`, and `max` state updates to the `StepInput`.
+     *
+     * @param control The rendered `sap.m.StepInput`.
+     * @param metadata The current property metadata.
+     */
+    protected override applyExtraState(control: Control, metadata: IPropertyMetadata): void {
+        const si = control as StepInput;
+        si.setRequired(this.isRequired());
+        if (metadata.minimum !== undefined) {
+            si.setProperty("min", metadata.minimum);
+        }
+        if (metadata.maximum !== undefined) {
+            si.setProperty("max", metadata.maximum);
+        }
+    }
+}

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/StringPlugin.ts

@@ -1,87 +1,49 @@
-/**
- * @file StringPlugin.ts
- * @description Renders a sap.m.Input for string data and validates lengths.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Input from "sap/m/Input";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering and logic for basic text inputs.
- * Maps schema properties like `maxLength` and `required` natively to `sap.m.Input`.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class StringPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.Input` control configured via the provided schema metadata.
-     * 
-     * @param fieldMetadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @param engineScopeId The deterministic scope ID.
-     * @param onChange The callback fired on value change.
-     * @returns {Control} The configured Input control.
-     */
-    public render(fieldMetadata: IPropertyMetadata,  bindingPath: string,  modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        this.onChange = onChange;
-        this.metadata = fieldMetadata;
-        this.fieldKey = bindingPath.replace("/", ""); // For EventBus
-        
-        if (!this.isEditable) {
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName)
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new Input({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            maxLength: fieldMetadata.maxLength || 0,
-            required: !!fieldMetadata.required,
-            showValueHelp: fieldMetadata.ui?.widget === "searchHelp",
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent as sap.ui.base.Event).getParameter("value");
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current string value from the input.
-     * @returns {unknown} The string value.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as Input).getProperty('value') : null;
-    }
-
-    /**
-     * Adjusts dynamic state properties (editable/required) based on ConditionEngine mutations.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) {
-                // Text doesn't have editable/required state
-                return;
-            }
-            const input = this.control as Input;
-            input.setEditable(!this.metadata.ui?.readOnly);
-            input.setRequired(this.metadata.required);
-        }
-    }
-}
+/**
+ * @file StringPlugin.ts
+ * @description Renders a standard sap.m.Input control for string properties.
+ */
+
+import { TextLikeInputPlugin } from "./TextLikeInputPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Input from "sap/m/Input";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+
+/**
+ * Plugin responsible for rendering standard text inputs (`sap.m.Input`).
+ * Supports `maxLength`, `placeholder`, and live validation hooks.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class StringPlugin extends TextLikeInputPlugin {
+    protected override readonly syncPlaceholderAndMaxLength: boolean = true;
+
+    /**
+     * Constructs the editable `sap.m.Input` control.
+     *
+     * @param metadata The specific JSON schema properties for this field.
+     * @param bindingPath The JSON path bound to this control.
+     * @param modelName The UI5 JSONModel name.
+     * @param engineScopeId The deterministic scope ID.
+     * @returns {Control} The configured Input control.
+     */
+    protected createEditableControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        return new Input({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            value: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            placeholder: metadata.ui?.placeholder || "",
+            maxLength: metadata.maxLength || 0,
+            required: this.isRequired(),
+            change: (oEvent: Event) => {
+                const src = oEvent.getSource() as Control;
+                this.notifyChange(src.getId());
+            }
+        });
+    }
+}