ngx-json-ui
Version:
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
97 lines (96 loc) • 4.3 kB
TypeScript
/**
* A versatile interface for component configurations.
*
* @example
* // A text field with a unique id (cid)
* {
* type: 'text',
* name: 'username',
* placeholder: 'Enter your username',
* cid: 'comp1234',
* class: ['input', 'text-input']
* }
*
* @example
* // A label without a unique id (cid)
* {
* type: 'label',
* text: 'Username'
* }
*/
export interface ComponentModel {
/**
* The type of the component (e.g., 'text', 'label', 'checkbox', etc.).
* please visit ../services/component-mapping.service.ts for the list of available types.
* The type is used to determine which Angular component to load.
*/
type: string;
/**
* An optional identifier for the component, used for form controls or as a reference.
* This is typically the name of the form control in a reactive form.
* For example, 'username' for a text input field.
* If the component is not part of a form, this can be any unique identifier.
*/
name?: string;
/**
* host class for the component.
* This is a string or an array of strings that represent CSS classes to be applied to the component's host element.
* For example, 'btn btn-primary' for a button component.
* This property can also be an object where the keys are class names and the values are booleans indicating whether to apply the class.
* Example: { 'btn': true, 'btn-primary': false } will apply only the 'btn' class.
* This property is optional and can be used to apply custom styles to the component.
* If not provided, the component will not have any additional classes applied.
*/
hostClass?: string[] | string | null | undefined;
/**
* Component-specific class.
* This is a string or an array of strings that represent CSS classes to be applied to the component itself.
* For example, 'input-field' for a text input component.
* If not provided, the component will not have any additional classes applied.
*/
class?: string[] | string | null | undefined;
/**
* host style for the component.
* This is a string representing inline styles to be applied to the component's host element.
* For example, 'color: red; font-size: 16px;'.
* This property is optional and can be used to apply custom styles to the component.
* If not provided, the component will not have any additional styles applied.
*/
hostStyle?: {
[prop: string]: any;
} | null | undefined;
/**
* Component-specific styles.
* This is a { [prop: string]: any } representing inline styles to be applied to the component itself.
* For example, {background-color: blue; padding: 10px;}.
* This property is optional and can be used to apply custom styles to the component.
* If not provided, the component will not have any additional styles applied.
*/
style?: {
[prop: string]: any;
} | null | undefined;
/**
* An optional unique component id for targeted JavaScript operations.
* This is useful for identifying the component in the DOM or for JavaScript operations.
* For example, 'comp1234' for a specific component instance.
* If not provided, the component will not have a unique identifier.
*/
cid?: string | null | undefined;
/**
* An array of nested child components, if the current component is a container.
* For example, a 'formGroup' component can have multiple child components.
* This property is used to define the structure of the component hierarchy.
* Example: [{ type: 'text', name: 'username' }, { type: 'password', name: 'password' }]
* This property is optional and should only be used if the component supports child components.
* If not provided, the component will not have any child components.
*/
components?: ComponentModel[];
/**
* Additional, component-specific properties.
* These properties can vary widely depending on the component type.
* For example, a text input might have 'placeholder' and 'value' properties,
* while a checkbox might have 'checked' and 'label' properties.
* Example: { placeholder: 'Enter text...', text: 'Display text', ... }
*/
[key: string]: any;
}