@decaf-ts/for-angular 0.0.22 → 0.0.24

package/components/component-renderer/component-renderer.component.d.ts

@@ -98,6 +98,7 @@ export declare class ComponentRendererComponent implements OnInit, OnDestroy {
      * @memberOf ComponentRendererComponent
      */
     component: ComponentRef<unknown>;
+    children: KeyValue[];
     /**
      * @description Event emitter for events from the rendered component.
      * @summary This output property emits events that originate from the dynamically rendered
@@ -216,7 +217,7 @@ export declare class ComponentRendererComponent implements OnInit, OnDestroy {
      * @memberOf ComponentRendererComponent
      */
     private createComponent;
-    createParentComponent(): void;
+    private createParentComponent;
     /**
      * @description Subscribes to events emitted by the dynamic component.
      * @summary This method sets up subscriptions to all EventEmitter properties of the
@@ -273,5 +274,5 @@ export declare class ComponentRendererComponent implements OnInit, OnDestroy {
      */
     private unsubscribeEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComponentRendererComponent, "ngx-decaf-component-renderer", never, { "tag": { "alias": "tag"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "model": { "alias": "model"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComponentRendererComponent, "ngx-decaf-component-renderer", never, { "tag": { "alias": "tag"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "children": { "alias": "children"; "required": false; }; "model": { "alias": "model"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }

package/components/crud-field/crud-field.component.d.ts

@@ -4,6 +4,7 @@ import { AutocompleteTypes, SelectInterface } from '@ionic/core';
 import { CrudOperations } from '@decaf-ts/db-decorators';
 import { NgxCrudFormField } from '../../engine/NgxCrudFormField';
 import { CrudFieldOption, FieldUpdateMode, PossibleInputTypes, StringOrBoolean } from '../../engine/types';
+import { CrudOperationKeys } from '@decaf-ts/ui-decorators';
 import * as i0 from "@angular/core";
 /**
  * @description A dynamic form field component for CRUD operations.
@@ -161,7 +162,7 @@ export declare class CrudFieldComponent extends NgxCrudFormField implements OnIn
      * @type {boolean}
      * @memberOf CrudFieldComponent
      */
-    hidden?: boolean;
+    hidden: boolean | CrudOperationKeys[];
     /**
      * @description Maximum allowed value for the field.
      * @summary For number inputs, this sets the maximum allowed numeric value.
@@ -479,6 +480,7 @@ export declare class CrudFieldComponent extends NgxCrudFormField implements OnIn
      * @type {string | number}
      */
     uid: string;
+    page: number;
     /**
      * @description Translatability of field labels.
      * @summary Indicates whether the field labels should be translated based on the current language settings.
@@ -605,5 +607,5 @@ export declare class CrudFieldComponent extends NgxCrudFormField implements OnIn
      */
     handleFieldsetRemoveGroupEvent(event: CustomEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CrudFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; "activeFormGroup": { "alias": "activeFormGroup"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "page": { "alias": "page"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; "activeFormGroup": { "alias": "activeFormGroup"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/fieldset/fieldset.component.d.ts

@@ -91,6 +91,15 @@ export declare class FieldsetComponent extends NgxBaseComponent implements OnIni
      * @memberOf FieldsetComponent
      */
     childOf: string;
+    /**
+     * @description Unique identifier for the current record.
+     * @summary A unique identifier for the current record being displayed or manipulated.
+     * This is typically used in conjunction with the primary key for operations on specific records.
+     *
+     * @type {string | number}
+     * @memberOf FieldsetComponent
+     */
+    page: number;
     /**
      * @description The parent component identifier for hierarchical fieldset relationships.
      * @summary Specifies the parent component name that this fieldset belongs to in a hierarchical
@@ -542,5 +551,5 @@ export declare class FieldsetComponent extends NgxBaseComponent implements OnIni
      */
     private getMapper;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "ngx-decaf-fieldset", never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "customTypes": { "alias": "customTypes"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "target": { "alias": "target"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "handlers": { "alias": "handlers"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "ngx-decaf-fieldset", never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "page": { "alias": "page"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "customTypes": { "alias": "customTypes"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "target": { "alias": "target"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "handlers": { "alias": "handlers"; "required": false; }; }, {}, never, ["[slot=content]"], true, never>;
 }

package/components/for-angular-components.module.d.ts

@@ -11,9 +11,10 @@ import * as i9 from "./pagination/pagination.component";
 import * as i10 from "./fieldset/fieldset.component";
 import * as i11 from "./layout/layout.component";
 import * as i12 from "./filter/filter.component";
-import * as i13 from "../directives/collapsable.directive";
+import * as i13 from "./steped-form/steped-form.component";
+import * as i14 from "../directives/collapsable.directive";
 export declare class ForAngularComponentsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ForAngularComponentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ForAngularComponentsModule, never, [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.CollapsableDirective], [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.CollapsableDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ForAngularComponentsModule, never, [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.StepedFormComponent, typeof i14.CollapsableDirective], [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.StepedFormComponent, typeof i14.CollapsableDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularComponentsModule>;
 }

package/components/index.d.ts

@@ -11,6 +11,6 @@ export * from './model-renderer/model-renderer.component';
 export * from './pagination/pagination.component';
 export * from './searchbar/searchbar.component';
 export * from './crud-form/constants';
-export * from './list/constants';
 export * from './pagination/constants';
+export * from './steped-form/steped-form.component';
 export * from './for-angular-components.module';

package/components/layout/layout.component.d.ts

@@ -104,30 +104,7 @@ export declare class LayoutComponent extends NgxBaseComponent implements OnInit
      *
      * @memberOf LayoutComponent
      */
-    ngOnInit(): void;
-    /**
-     * @description Initializes the layout component with processed properties.
-     * @summary Overrides the base component's initialize method to set up the grid layout.
-     * This method processes input properties, normalizes the breakpoint value, converts
-     * rows and columns to their array representations, and marks the component as initialized.
-     * The initialization ensures all properties are in the correct format for rendering.
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant L as LayoutComponent
-     *   participant B as NgxBaseComponent
-     *
-     *   L->>B: parseProps(this)
-     *   Note over L: Process component properties
-     *   L->>L: Normalize breakpoint to lowercase
-     *   L->>L: Convert rows to array format
-     *   L->>L: Convert cols to array format
-     *   L->>L: Set initialized = true
-     *
-     * @override
-     * @memberOf LayoutComponent
-     */
-    initialize(): void;
+    ngOnInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ngx-decaf-layout", never, { "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "children": { "alias": "children"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/list/list.component.d.ts

@@ -6,8 +6,7 @@ import { Condition, OrderDirection, Paginator } from '@decaf-ts/core';
 import { BaseCustomEvent, RendererCustomEvent, StringOrBoolean, KeyValue, ListItemCustomEvent } from '../../engine';
 import { NgxBaseComponent } from '../../engine/NgxBaseComponent';
 import { PaginationCustomEvent } from '../pagination/constants';
-import { IListEmptyResult, ListComponentsTypes } from './constants';
-import { FunctionLike, IFilterQuery } from '../../engine';
+import { FunctionLike, IFilterQuery, IListEmptyResult, ListComponentsTypes } from '../../engine';
 import * as i0 from "@angular/core";
 /**
  * @description A versatile list component that supports various data display modes.

package/components/model-renderer/model-renderer.component.d.ts

@@ -41,6 +41,11 @@ export declare class ModelRendererComponent<M extends Model> implements OnChange
      * @description Global variables to be passed to the rendered component
      */
     globals: Record<string, unknown>;
+    /**
+     * @description Set if render content projection is allowed
+     * @default true
+     */
+    projectable: boolean;
     /**
      * @description Template reference for inner content
      */
@@ -88,5 +93,5 @@ export declare class ModelRendererComponent<M extends Model> implements OnChange
     private unsubscribeEvents;
     protected readonly JSON: JSON;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelRendererComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModelRendererComponent<any>, "ngx-decaf-model-renderer", never, { "model": { "alias": "model"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelRendererComponent<any>, "ngx-decaf-model-renderer", never, { "model": { "alias": "model"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "projectable": { "alias": "projectable"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }

package/components/steped-form/steped-form.component.d.ts

@@ -0,0 +1,243 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
+import { UIModelMetadata } from '@decaf-ts/ui-decorators';
+import { CrudOperations } from '@decaf-ts/db-decorators';
+import { BaseCustomEvent } from '../../engine';
+import * as i0 from "@angular/core";
+export declare class StepedFormComponent implements OnInit, OnDestroy {
+    /**
+     * @description Number of pages in the stepped form.
+     * @summary Represents the total number of steps/pages in the multi-step form.
+     * This value is automatically calculated based on the page properties of the children
+     * or can be explicitly set. Each page represents a logical group of form fields.
+     *
+     * @type {number}
+     * @default 1
+     * @memberOf StepedFormComponent
+     */
+    pages: number;
+    /**
+     * @description The CRUD operation type for this form.
+     * @summary Defines the type of operation being performed (CREATE, READ, UPDATE, DELETE).
+     * This affects form behavior, validation rules, and field accessibility. For example,
+     * READ operations might disable form fields, while CREATE operations enable all fields.
+     *
+     * @type {CrudOperations}
+     * @default OperationKeys.CREATE
+     * @memberOf StepedFormComponent
+     */
+    operation: CrudOperations;
+    /**
+     * @description The initial page to display when the form loads.
+     * @summary Specifies which page of the multi-step form should be shown first.
+     * This allows starting the form at any step, useful for scenarios like editing
+     * existing data where you might want to jump to a specific section.
+     *
+     * @type {number}
+     * @default 1
+     * @memberOf StepedFormComponent
+     */
+    startPage: number;
+    /**
+     * @description Array of UI model metadata for all form fields.
+     * @summary Contains the complete collection of UI model metadata that defines
+     * the structure, validation, and presentation of form fields across all pages.
+     * Each metadata object contains information about field type, validation rules,
+     * page assignment, and display properties.
+     *
+     * @type {UIModelMetadata[]}
+     * @memberOf StepedFormComponent
+     */
+    children: UIModelMetadata[];
+    /**
+     * @description Angular reactive FormGroup or FormArray for form state management.
+     * @summary The form instance that manages all form controls, validation, and form state.
+     * When using FormArray, each array element represents a page's FormGroup. When using
+     * FormGroup, it contains all form controls for the entire stepped form.
+     *
+     * @type {FormGroup | FormArray | undefined}
+     * @memberOf StepedFormComponent
+     */
+    formGroup: FormGroup | FormArray | undefined;
+    /**
+     * @description Array of UI model metadata for the currently active page.
+     * @summary Contains only the UI model metadata for fields that should be displayed
+     * on the currently active page. This is a filtered subset of the children array,
+     * updated whenever the user navigates between pages.
+     *
+     * @type {UIModelMetadata[] | undefined}
+     * @memberOf StepedFormComponent
+     */
+    activeChildren: UIModelMetadata[] | undefined;
+    /**
+     * @description FormGroup for the currently active page.
+     * @summary The FormGroup instance that manages form controls and validation
+     * for the current page only. This is extracted from the main formGroup
+     * when using FormArray structure.
+     *
+     * @type {FormGroup | undefined}
+     * @memberOf StepedFormComponent
+     */
+    activeFormGroup: FormGroup | undefined;
+    /**
+     * @description The currently active page number.
+     * @summary Tracks which page of the multi-step form is currently being displayed.
+     * This property is updated as users navigate through the form steps using
+     * the next/back buttons or programmatic navigation.
+     *
+     * @type {number}
+     * @memberOf StepedFormComponent
+     */
+    activePage: number;
+    /**
+     * @description Array representing the structure of pages.
+     * @summary Contains metadata about each page, including page numbers and indices.
+     * This array is built during initialization to organize the form fields into
+     * logical pages and provide navigation structure.
+     *
+     * @type {UIModelMetadata[]}
+     * @memberOf StepedFormComponent
+     */
+    pagesArray: UIModelMetadata[];
+    /**
+     * @description Subscription for timer-based operations.
+     * @summary Manages the timer subscription used for asynchronous operations
+     * like updating active children after page transitions. This subscription
+     * is cleaned up in ngOnDestroy to prevent memory leaks.
+     *
+     * @private
+     * @type {Subscription}
+     * @memberOf StepedFormComponent
+     */
+    private timerSubscription;
+    /**
+     * @description Event emitter for form submission.
+     * @summary Emits events when the form is submitted, typically on the last page
+     * when all validation passes. The emitted event contains the form data and
+     * event type information for parent components to handle.
+     *
+     * @type {EventEmitter<BaseCustomEvent>}
+     * @memberOf StepedFormComponent
+     */
+    submitEvent: EventEmitter<BaseCustomEvent>;
+    /**
+     * @description Creates an instance of StepedFormComponent.
+     * @summary Initializes a new StepedFormComponent instance and registers the required
+     * Ionic icons for navigation buttons (forward and back arrows).
+     *
+     * @memberOf StepedFormComponent
+     */
+    constructor();
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the stepped form by organizing children into pages, calculating the total
+     * number of pages, and initializing the active page. This method processes the UI model metadata
+     * to create a logical page structure and ensures proper page assignments for all form fields.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant S as StepedFormComponent
+     *   participant F as Form Service
+     *
+     *   A->>S: ngOnInit()
+     *   S->>S: Set activePage = startPage
+     *   S->>S: Process children into pagesArray
+     *   S->>S: Calculate total pages
+     *   S->>S: Assign page props to children
+     *   S->>S: getCurrentFormGroup(activePage)
+     *   S->>F: Extract FormGroup for active page
+     *   F-->>S: Return activeFormGroup
+     *
+     * @memberOf StepedFormComponent
+     */
+    ngOnInit(): void;
+    /**
+     * @description Cleanup method called when the component is destroyed.
+     * @summary Unsubscribes from any active timer subscriptions to prevent memory leaks.
+     * This is part of Angular's component lifecycle and ensures proper resource cleanup.
+     *
+     * @memberOf StepedFormComponent
+     */
+    ngOnDestroy(): void;
+    /**
+     * @description Handles navigation to the next page or form submission.
+     * @summary Validates the current page's form fields and either navigates to the next page
+     * or submits the entire form if on the last page. Form validation must pass before
+     * proceeding. On successful submission, emits a submit event with form data.
+     *
+     * @param {boolean} lastPage - Whether this is the last page of the form
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant S as StepedFormComponent
+     *   participant F as Form Service
+     *   participant P as Parent Component
+     *
+     *   U->>S: Click Next/Submit
+     *   S->>F: validateFields(activeFormGroup)
+     *   F-->>S: Return validation result
+     *   alt Not last page and valid
+     *     S->>S: activePage++
+     *     S->>S: getCurrentFormGroup(activePage)
+     *   else Last page and valid
+     *     S->>F: getFormData(formGroup)
+     *     F-->>S: Return form data
+     *     S->>P: submitEvent.emit({data, name: SUBMIT})
+     *   end
+     *
+     * @memberOf StepedFormComponent
+     */
+    handleNext(lastPage?: boolean): void;
+    /**
+     * @description Handles navigation to the previous page.
+     * @summary Moves the user back to the previous page in the stepped form.
+     * This method decrements the active page number and updates the form
+     * group and children to display the previous page's content.
+     *
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant S as StepedFormComponent
+     *
+     *   U->>S: Click Back
+     *   S->>S: activePage--
+     *   S->>S: getCurrentFormGroup(activePage)
+     *   Note over S: Update active form and children
+     *
+     * @memberOf StepedFormComponent
+     */
+    handleBack(): void;
+    /**
+     * @description Updates the active form group and children for the specified page.
+     * @summary Extracts the FormGroup for the given page from the FormArray and filters
+     * the children to show only fields belonging to that page. Uses a timer to ensure
+     * proper Angular change detection when updating the activeChildren.
+     *
+     * @param {number} page - The page number to activate
+     * @return {void}
+     *
+     * @private
+     * @mermaid
+     * sequenceDiagram
+     *   participant S as StepedFormComponent
+     *   participant F as FormArray
+     *   participant T as Timer
+     *
+     *   S->>F: Extract FormGroup at index (page - 1)
+     *   F-->>S: Return page FormGroup
+     *   S->>S: Set activeChildren = undefined
+     *   S->>T: timer(10).subscribe()
+     *   T-->>S: Filter children for active page
+     *   S->>S: Set activeChildren
+     *
+     * @memberOf StepedFormComponent
+     */
+    private getCurrentFormGroup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepedFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepedFormComponent, "ngx-decaf-steped-form", never, { "pages": { "alias": "pages"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "startPage": { "alias": "startPage"; "required": false; }; "children": { "alias": "children"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+}

package/engine/NgxBaseComponent.d.ts

@@ -4,7 +4,7 @@ import { Model } from '@decaf-ts/decorator-validation';
 import { CrudOperations } from '@decaf-ts/db-decorators';
 import { NgxRenderingEngine } from './NgxRenderingEngine';
 import { Logger } from '@decaf-ts/logging';
-import { DecafRepository } from '../components/list/constants';
+import { DecafRepository } from './types';
 import * as i0 from "@angular/core";
 /**
  * @description Base component class that provides common functionality for all Decaf components.
@@ -461,7 +461,7 @@ export declare abstract class NgxBaseComponent implements OnChanges {
      * an initialization message with the component name. This method is typically called
      * during the component's lifecycle setup.
      */
-    initialize(): void;
+    initialize(parseProps?: boolean, skip?: string[]): Promise<void>;
     /**
      * @description Handles custom events from child components.
      * @summary Receives events from child renderer components and forwards them to parent
@@ -535,7 +535,7 @@ export declare abstract class NgxBaseComponent implements OnChanges {
      * @protected
      * @memberOf NgxBaseComponent
      */
-    protected parseProps(instance: KeyValue): void;
+    protected parseProps(instance: KeyValue, skip: string[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxBaseComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgxBaseComponent, "ng-component", never, { "rendererId": { "alias": "rendererId"; "required": false; }; "model": { "alias": "model"; "required": false; }; "props": { "alias": "props"; "required": false; }; "item": { "alias": "item"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; "route": { "alias": "route"; "required": false; }; "operations": { "alias": "operations"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; "className": { "alias": "className"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "renderChild": { "alias": "renderChild"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }

package/engine/NgxCrudFormField.d.ts

@@ -35,6 +35,7 @@ export declare abstract class NgxCrudFormField implements ControlValueAccessor,
     type: PossibleInputTypes;
     disabled?: boolean;
     uid?: string;
+    page: number;
     format?: string;
     hidden?: boolean | CrudOperationKeys[];
     max?: number | Date;