Class

DecafComponent

DecafComponent()

Base class for all Decaf UI components, providing common state management, logging, localization, navigation hooks, CRUD context metadata, and repository integration used by higher-level decorators and renderers.

Constructor

# new DecafComponent()

View Source ui/DecafComponent.ts, line 12

Classes

DecafComponent

Members

# protected readonly OperationKeys

Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.

Reference to CRUD operation constants for template usage.

View Source ui/DecafComponent.ts, line 230

# protected readonly OperationKeys

Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.

Reference to CRUD operation constants for template usage.

View Source ui/DecafComponent.ts, line 639

IRepository.<M>

# protected _repository

Provides a connection to the data layer for retrieving and manipulating data. This is an instance of the DecafRepository class, initialized lazily in the repository getter. The repository is used to perform CRUD (Create, Read, Update, Delete) operations on the data model and provides methods for querying and filtering data based on specific criteria.

Repository instance for data layer operations.

View Source ui/DecafComponent.ts, line 251

IRepository.<M>

# protected _repository

Provides a connection to the data layer for retrieving and manipulating data. This is an instance of the DecafRepository class, initialized lazily in the repository getter. The repository is used to perform CRUD (Create, Read, Update, Delete) operations on the data model and provides methods for querying and filtering data based on specific criteria.

Repository instance for data layer operations.

View Source ui/DecafComponent.ts, line 663

boolean

# borders

Boolean flag that determines if the component should be visually outlined with borders. When true, borders are shown to visually separate the component from surrounding content.

Controls whether borders are displayed around the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 196

boolean

# borders

Boolean flag that determines if the component should be visually outlined with borders. When true, borders are shown to visually separate the component from surrounding content.

Controls whether borders are displayed around the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 599

# protected changeDetectorRef

Injected service that provides manual control over change detection cycles. This is essential for ensuring that programmatic DOM changes (like setting accordion attributes) are properly reflected in the component's state and trigger appropriate view updates when modifications occur outside the normal Angular change detection flow.

Angular change detection service for manual change detection control.

View Source ui/DecafComponent.ts, line 106

any

# protected changeDetectorRef

Injected service that provides manual control over change detection cycles. This is essential for ensuring that programmatic DOM changes (like setting accordion attributes) are properly reflected in the component's state and trigger appropriate view updates when modifications occur outside the normal Angular change detection flow.

Angular change detection service for manual change detection control.

View Source ui/DecafComponent.ts, line 497

string | undefined

# childOf

Specifies the identifier of the parent component in a hierarchical component structure. This property establishes a parent-child relationship between components, allowing for proper nesting and organization of components within a layout. It can be used to track component dependencies and establish component hierarchies for rendering and event propagation.

Parent component identifier for hierarchical component relationships.

View Source ui/DecafComponent.ts, line 81

string | undefined

# childOf

Specifies the identifier of the parent component in a hierarchical component structure. This property establishes a parent-child relationship between components, allowing for proper nesting and organization of components within a layout. It can be used to track component dependencies and establish component hierarchies for rendering and event propagation.

Parent component identifier for hierarchical component relationships.

View Source ui/DecafComponent.ts, line 467

string | undefined

# protected componentName

Stores the component's name which is used as a key for logging contexts and as a base for locale resolution.

Component name identifier for logging and localization contexts.

View Source ui/DecafComponent.ts, line 204

string | undefined

# protected componentName

Stores the component's name which is used as a key for logging contexts and as a base for locale resolution.

Component name identifier for logging and localization contexts.

View Source ui/DecafComponent.ts, line 609

boolean

# protected enableDarkMode

When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.

Flag to enable or disable dark mode support for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 136

boolean

# protected enableDarkMode

When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.

Flag to enable or disable dark mode support for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 532

any

# filter

Supply a custom AttributeOption to control how records are constrained. When omitted, the directive derives a condition from filterBy or pk, comparing it against modelId.

Pre-built filtering expression applied to repository queries.

View Source ui/DecafComponent.ts, line 37

any

# filter

Supply a custom AttributeOption to control how records are constrained. When omitted, the directive derives a condition from filterBy or pk, comparing it against modelId.

Pre-built filtering expression applied to repository queries.

View Source ui/DecafComponent.ts, line 418

string

# filterBy

Indicates which key should be compared to modelId when filter is not provided. Defaults to the configured primary key so overrides are only needed for custom lookups.

Model field used when generating the default condition.

View Source ui/DecafComponent.ts, line 44

string

# filterBy

Indicates which key should be compared to modelId when filter is not provided. Defaults to the configured primary key so overrides are only needed for custom lookups.

Model field used when generating the default condition.

View Source ui/DecafComponent.ts, line 426

boolean | Array.<CrudOperationKeys>

# hidden

Can be a boolean or an array of operation keys where the field should be hidden.

Controls field visibility based on CRUD operations.

View Source ui/DecafComponent.ts, line 112

boolean | Array.<CrudOperationKeys>

# hidden

Can be a boolean or an array of operation keys where the field should be hidden.

Controls field visibility based on CRUD operations.

View Source ui/DecafComponent.ts, line 504

boolean

# initialized

Tracks whether the component has completed its initialization process. This flag is used to prevent duplicate initialization and to determine if certain operations that require initialization can be performed.

Initialization status flag for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 260

boolean

# protected initialized

Tracks whether the component has completed its initialization process. This flag is used to prevent duplicate initialization and to determine if certain operations that require initialization can be performed.

Initialization status flag for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 674

boolean

# protected isDarkMode

When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.

Flag to enable or disable dark mode support for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 147

boolean

# protected isDarkMode

When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.

Flag to enable or disable dark mode support for the component.

Default Value:
  • false

View Source ui/DecafComponent.ts, line 545

Record.<string, unknown>

# item

Defines how list items should be rendered in the component. This property holds a configuration object that specifies the tag name and other properties needed to render list items correctly. The tag property identifies which component should be used to render each item in a list. Additional properties can be included to customize the rendering behavior.

Configuration for list item rendering behavior.

Default Value:
  • {tag: ""}

View Source ui/DecafComponent.ts, line 167

Record.<string, unknown>

# item

Defines how list items should be rendered in the component. This property holds a configuration object that specifies the tag name and other properties needed to render list items correctly. The tag property identifies which component should be used to render each item in a list. Additional properties can be included to customize the rendering behavior.

Configuration for list item rendering behavior.

Default Value:
  • {tag: ""}

View Source ui/DecafComponent.ts, line 567

string | undefined

# label

Provides a user-friendly label for the file upload input.

Label for the file upload field.

View Source ui/DecafComponent.ts, line 119

string | undefined

# label

Provides a user-friendly label for the file upload input.

Label for the file upload field.

View Source ui/DecafComponent.ts, line 512

string | undefined

# locale

Specifies the locale code (e.g., 'en-US', 'pt-BR') used for translating UI text and formatting data according to regional conventions. This property can be set to override the default application locale for this specific component instance, enabling per-component localization when needed.

Current locale identifier for component internationalization.

View Source ui/DecafComponent.ts, line 156

string | undefined

# locale

Specifies the locale code (e.g., 'en-US', 'pt-BR') used for translating UI text and formatting data according to regional conventions. This property can be set to override the default application locale for this specific component instance, enabling per-component localization when needed.

Current locale identifier for component internationalization.

View Source ui/DecafComponent.ts, line 555

string | undefined

# protected localeRoot

Defines the base key used to resolve localization contexts for this component. If not explicitly provided, it defaults to the component's name. This key is used to load appropriate translation resources and locale-specific configurations.

Root key for component locale context resolution.

View Source ui/DecafComponent.ts, line 213

string | undefined

# protected localeRoot

Defines the base key used to resolve localization contexts for this component. If not explicitly provided, it defaults to the component's name. This key is used to load appropriate translation resources and locale-specific configurations.

Root key for component locale context resolution.

View Source ui/DecafComponent.ts, line 620

# location

Injected service that provides direct access to the browser's URL and history. Unlike the Router, Location allows for low-level manipulation of the browser's history stack and URL path, such as programmatically navigating back or forward, or updating the URL without triggering a route change. This is useful for scenarios where you need to interact with the browser history or URL outside of Angular's routing system, such as closing modals, handling popstate events, or supporting custom navigation logic.

Angular Location service.

View Source ui/DecafComponent.ts, line 241

any

# location

Injected service that provides direct access to the browser's URL and history. Unlike the Router, Location allows for low-level manipulation of the browser's history stack and URL path, such as programmatically navigating back or forward, or updating the URL without triggering a route change. This is useful for scenarios where you need to interact with the browser history or URL outside of Angular's routing system, such as closing modals, handling popstate events, or supporting custom navigation logic.

Angular Location service.

View Source ui/DecafComponent.ts, line 651

M | Model | string | undefined

# model

The data model that this component will use for CRUD operations. This can be provided as a Model instance, a model constructor, or a string representing the model's registered name. When set, this property provides the component with access to the model's schema, validation rules, and metadata needed for rendering and data operations.

Data model or model name for component operations.

View Source ui/DecafComponent.ts, line 21

M | Model | string | undefined

# model

The data model that this component will use for CRUD operations. This can be provided as a Model instance, a model constructor, or a string representing the model's registered name. When set, this property provides the component with access to the model's schema, validation rules, and metadata needed for rendering and data operations.

Data model or model name for component operations.

View Source ui/DecafComponent.ts, line 400

PrimaryKeyType | Array.<PrimaryKeyType>

# modelId

Specifies the primary key value for the current model record being displayed or manipulated by the component. This identifier is used for CRUD operations that target specific records, such as read, update, and delete operations. The value corresponds to the field designated as the primary key in the model definition.

Primary key value of the current model instance.

View Source ui/DecafComponent.ts, line 30

PrimaryKeyType | Array.<PrimaryKeyType>

# modelId

Specifies the primary key value for the current model record being displayed or manipulated by the component. This identifier is used for CRUD operations that target specific records, such as read, update, and delete operations. The value corresponds to the field designated as the primary key in the model definition.

Primary key value of the current model instance.

View Source ui/DecafComponent.ts, line 410

string

# name

Provides a string identifier that can be used to name or label the component instance. This name can be used for debugging purposes, logging, or to identify specific component instances within a larger application structure. It serves as a human-readable identifier that helps distinguish between multiple instances of the same component type.

Name identifier for the component instance.

View Source ui/DecafComponent.ts, line 72

string

# name

Provides a string identifier that can be used to name or label the component instance. This name can be used for debugging purposes, logging, or to identify specific component instances within a larger application structure. It serves as a human-readable identifier that helps distinguish between multiple instances of the same component type.

Name identifier for the component instance.

View Source ui/DecafComponent.ts, line 457

OperationKeys

# operation

Specifies which operation (Create, Read, Update, Delete) this component instance should perform. This determines the UI behavior, form configuration, and available actions. The operation affects form validation, field availability, and the specific repository method called during data submission.

The CRUD operation type to be performed on the model.

View Source ui/DecafComponent.ts, line 54

OperationKeys

# operation

Specifies which operation (Create, Read, Update, Delete) this component instance should perform. This determines the UI behavior, form configuration, and available actions. The operation affects form validation, field availability, and the specific repository method called during data submission.

The CRUD operation type to be performed on the model.

View Source ui/DecafComponent.ts, line 437

string

# pk

Specifies which field in the model should be used as the primary key. This is typically used for identifying unique records in operations like update and delete. If not explicitly set, it defaults to the repository's configured primary key or 'id'.

Primary key field name for the data model.

View Source ui/DecafComponent.ts, line 97

string

# pk

Specifies which field in the model should be used as the primary key. This is typically used for identifying unique records in operations like update and delete. If not explicitly set, it defaults to the repository's configured primary key or 'id'.

Primary key field name for the data model.

View Source ui/DecafComponent.ts, line 486

Record.<string, unknown>

# props

Contains key-value pairs of dynamic properties that can be applied to the component at runtime. This flexible configuration object allows for dynamic property assignment without requiring explicit input bindings for every possible configuration option. Properties from this object are parsed and applied to the component instance through the parseProps method, enabling customizable component behavior based on external configuration.

Dynamic properties configuration for runtime customization.

Default Value:
  • {}

View Source ui/DecafComponent.ts, line 178

Record.<string, unknown>

# props

Contains key-value pairs of dynamic properties that can be applied to the component at runtime. This flexible configuration object allows for dynamic property assignment without requiring explicit input bindings for every possible configuration option. Properties from this object are parsed and applied to the component instance through the parseProps method, enabling customizable component behavior based on external configuration.

Dynamic properties configuration for runtime customization.

Default Value:
  • {}

View Source ui/DecafComponent.ts, line 579

boolean

# readonly

Whether the field is read-only.

Whether the field is read-only.

View Source ui/DecafComponent.ts, line 125

boolean

# readonly

Whether the field is read-only.

Whether the field is read-only.

View Source ui/DecafComponent.ts, line 519

string

# route

Defines the base route path used for navigation actions related to this component. This is often used as a prefix for constructing navigation URLs when transitioning between different operations or views. The route helps establish the component's position in the application's routing hierarchy.

Base route path for component navigation.

View Source ui/DecafComponent.ts, line 187

string

# route

Defines the base route path used for navigation actions related to this component. This is often used as a prefix for constructing navigation URLs when transitioning between different operations or views. The route helps establish the component's position in the application's routing hierarchy.

Base route path for component navigation.

View Source ui/DecafComponent.ts, line 589

Router

# protected router

Injected Router service used for programmatic navigation between routes in the application. This service enables navigation to different views and operations, handles route parameters, and manages the browser's navigation history.

Router instance for programmatic navigation.

View Source ui/DecafComponent.ts, line 63

Router

# protected router

Injected Router service used for programmatic navigation between routes in the application. This service enables navigation to different views and operations, handles route parameters, and manages the browser's navigation history.

Router instance for programmatic navigation.

View Source ui/DecafComponent.ts, line 447

string

# uid

A unique identifier automatically generated for each component instance. This UID is used for DOM element identification, component tracking, and debugging purposes. By default, it generates a random 16-character value, but it can be explicitly set via input.

Unique identifier for the component instance.

View Source ui/DecafComponent.ts, line 89

string

# uid

A unique identifier automatically generated for each component instance. This UID is used for DOM element identification, component tracking, and debugging purposes. By default, it generates a random 16-character value, but it can be explicitly set via input.

Unique identifier for the component instance.

View Source ui/DecafComponent.ts, line 476

any

# value

Can be a string, number, date, or array of string or objects.

Current value of the component.

View Source ui/DecafComponent.ts, line 220

any

# value

Can be a string, number, date, or array of string or objects.

Current value of the component.

View Source ui/DecafComponent.ts, line 628

Methods

# async initialize(args)

Asynchronously initializes the component with the provided arguments.

Asynchronously initializes the component with the provided arguments. This method sets the initialized property to true once the initialization is complete.

Parameters:
Name Type Description
args

A variable number of arguments of unknown types that can be used for initialization.

View Source ui/DecafComponent.ts, line 684

A promise that resolves when the initialization is complete.

# protected parseEvents(events, instance) → {UIEventProperty}

Processes an events map produced by decorators where each value can be a factory returning a function or a component constructor. When a constructor is returned, the method matching the event key is instantiated and stored; otherwise the produced function is assigned directly. This enables flexible event binding definitions for derived components.

Registers event callbacks on the component instance.

Parameters:
Name Type Description
events

Dictionary of event names mapped to function factories or component constructors.

instance

Optional component instance to receive the events; defaults to this.

View Source ui/DecafComponent.ts, line 731

UIEventProperty

# protected parseHandlers(handlers, instance) → {UIEventProperty}

Iterates through a handlers map and ensures each entry is stored as a callable function on the component. Plain functions are stored directly, while handler classes are instantiated so their handle method (or a keyed override) becomes the registered handler. This allows decorators to accept either inline functions or handler classes transparently.

Normalizes handler definitions into executable functions.

Parameters:
Name Type Description
handlers

Dictionary of handler names mapped to functions or handler constructors.

instance

Optional target handler instance; defaults to the current component.

View Source ui/DecafComponent.ts, line 717

UIEventProperty

# async submit(args)

Submits data or performs an action associated with the component.

Submits data or performs an action associated with the component.

Parameters:
Name Type Description
args

A variable number of arguments of any type to be passed to the submit operation.

View Source ui/DecafComponent.ts, line 703

A promise that resolves with the result of the submit operation.

# async translate(args)

Translates content based on the provided arguments.

Translates content based on the provided arguments. Logs the translation request with the component name and arguments.

Parameters:
Name Type Description
args

A variable number of arguments used for translation.

View Source ui/DecafComponent.ts, line 694

A promise that resolves with the translation result.