import { TemplateResult, CSSResult } from 'lit';
import { type IProperty, Property } from '@api-client/core/models/Property.js';
import ApiElement from '../ApiElement.js';
import '../../md/icons/ui-icon.js';
import '../../md/list/ui-list.js';
import '../../md/list/ui-list-item.js';
import '../../md/switch/ui-switch.js';
import '../../md/icon-button/ui-icon-button.js';
/**
 * An element to render a list of variables with an ability to edit them.
 */
export default class VariablesEditor extends ApiElement {
    static get styles(): CSSResult[];
    /**
     * The list of variables to render or edit.
     * This list is mutated. If you don't want this to mutate changes
     * make a copy first.
     */
    accessor variables: IProperty[] | undefined;
    /**
     * By default all values are masked. When this is set it renders all values visible.
     */
    accessor renderValues: boolean;
    protected accessor editedVariable: number | undefined;
    protected accessor editor: HTMLElement | null;
    /**
     * Updates name/value of a parameter on a specific index.
     */
    updateProperty(index: number, field: 'name' | 'value', value: string): void;
    /**
     * Removes a parameter from an index.
     */
    removeProperty(index: number): void;
    /**
     * Toggles enabled state of a parameter.
     */
    toggleProperty(index: number, enabled: boolean): void;
    protected handleAddVariable(): void;
    protected ensureEditorInView(): Promise<void>;
    /**
     * Toggles visibility of the variable values.
     */
    protected handleVisibilityToggle(): void;
    /**
     * A handler for the click event on the variable edit icon.
     * Sets state to edit this variable
     */
    protected handleEditVariable(e: Event): void;
    protected handleNameChange(e: Event): void;
    protected handleValueChange(e: Event): void;
    /**
     * Removes the variable from the environment
     */
    protected handleVariableDelete(e: Event): void;
    protected handleRemove(e: Event): void;
    protected handleToggle(e: Event): void;
    /**
     * A handler for the variable editor close button click.
     */
    protected handleEditorClose(): void;
    protected render(): TemplateResult;
    protected renderHeader(): TemplateResult;
    protected renderAddButton(): TemplateResult;
    protected renderToggleVisibilityButton(): TemplateResult;
    protected renderList(): TemplateResult;
    protected renderEmptyInfo(): TemplateResult;
    /**
     * @param item The variable to render.
     * @returns The template for the variable line or variable editor
     */
    protected renderListItem(item: IProperty | Property, index: number): TemplateResult;
    /**
     * @param index The index of the property on the list
     * @returns The template for list item actions
     */
    protected renderListActions(index: number): TemplateResult;
    /**
     * @param item The variable to render.
     * @returns The template for the variables editor
     */
    protected renderEditor(item: IProperty | Property, index: number): TemplateResult;
    protected renderToggleButton(item: IProperty | Property, index: number): TemplateResult;
    protected renderDeleteButton(index: number): TemplateResult;
    protected renderEditButton(index: number): TemplateResult;
    protected renderCloseEditor(index: number): TemplateResult;
    protected renderNameField(item: IProperty | Property, index: number): TemplateResult;
    protected renderValueField(item: IProperty | Property, index: number): TemplateResult;
}
//# sourceMappingURL=VariablesEditor.d.ts.map