UIElementApi

API interface for UI element implementations in the Stripo Email Editor Extensions SDK.

interface UIElementApi extends BaseApi

Description

The UIElementApi interface provides API functionality for custom UI elements used within controls. It extends the BaseApi interface and adds methods for handling value changes. UI elements are the building blocks of control interfaces - inputs, toggles, selects, and other interactive components.

Import

import { UIElementApi } from '@stripoinc/ui-editor-extensions';

Inheritance

• Extends: BaseApi

Properties

None (all functionality provided through methods)

Methods

triggerValueChange()

Function to be called by the UIElement implementation when its value changes. This signals the change to the managing control.

triggerValueChange(value: unknown): void

Parameters

Parameter	Type	Description
value	unknown	The new value of the UI element

Usage Notes

• Call this whenever the element's value changes
• The control receives this through its value change handlers
• Triggers validation and dependent updates
• Essential for two-way data binding

Example

import {UIElement} from '@stripoinc/ui-editor-extensions';

export class CustomSlider extends UIElement {
    getId() {
        return 'custom-slider';
    }

    getTemplate() {
        return `
          <div class="custom-slider-container">
            <input type="range" class="slider" min="0" max="100" value="50">
            <span class="value-display">50</span>
          </div>
        `;
    }

    onRender(container) {
        this.slider = container.querySelector('.slider');
        this.display = container.querySelector('.value-display');

        this.slider.addEventListener('input', (event) => {
            const value = parseInt(event.target.value);
            this.display.textContent = value;

            // Notify the editor of the value change
            this.api.triggerValueChange(value);
        });
    }

    getValue() {
        return parseInt(this.slider.value);
    }

    setValue(value) {
        this.slider.value = value;
        this.display.textContent = value;
    }
}

---

Inherited Methods from BaseApi

BaseApi - Base API interface