@olafvv/ngx-dynamic-form 0.3.0 → 0.5.0

package/lib/controls/datepicker/dynamic-datepicker.component.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
+import { DynamicFormFieldEvent } from '../../models/interfaces/dynamic-form-field-event.interface';
+import { DynamicDatepicker } from './dynamic-datepicker.model';
+import * as i0 from "@angular/core";
+export declare class DynamicDatepickerComponent extends DynamicFormFieldBase {
+    model: DynamicDatepicker;
+    group: UntypedFormGroup;
+    change: EventEmitter<DynamicFormFieldEvent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDatepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicDatepickerComponent, "dynamic-datepicker", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}

package/lib/controls/datepicker/dynamic-datepicker.model.d.ts

@@ -0,0 +1,21 @@
+import { DynamicFormFieldValueConfig, DynamicFormFieldValueModel } from '../../models/classes/dynamic-form-field-value-model';
+export declare const DYNAMIC_FORM_FIELD_DATEPICKER = "datepicker";
+export type DynamicDatepickerControlValue = Date | object | string | null;
+export interface DynamicDatepickerConfig extends DynamicFormFieldValueConfig<DynamicDatepickerControlValue> {
+    /** Maximum date selectable in the datepicker */
+    max?: DynamicDatepickerControlValue;
+    /** Minimum date selectable in the datepicker */
+    min?: DynamicDatepickerControlValue;
+    /** The initial date visible inside the datepicker when opening the picker */
+    startAt?: DynamicDatepickerControlValue;
+    /** The view the picker is initializing when opening */
+    startView?: 'month' | 'year' | 'multi-year';
+}
+export declare class DynamicDatepicker extends DynamicFormFieldValueModel<DynamicDatepickerControlValue> {
+    max: DynamicDatepickerControlValue | null;
+    min: DynamicDatepickerControlValue | null;
+    startAt: DynamicDatepickerControlValue | null;
+    startView: 'month' | 'year' | 'multi-year';
+    readonly type = "datepicker";
+    constructor(config: DynamicDatepickerConfig);
+}

package/lib/controls/input/dynamic-input.model.d.ts

@@ -1,7 +1,9 @@
+import { WritableSignal } from '@angular/core';
 import { DynamicFormFieldValueConfig, DynamicFormFieldValueModel } from '../../models/classes/dynamic-form-field-value-model';
 export declare const DYNAMIC_FORM_FIELD_INPUT = "input";
 export type HtmlInputType = 'text' | 'number' | 'tel' | 'email' | 'password' | 'date' | 'time' | 'color';
-export interface DynamicInputConfig extends DynamicFormFieldValueConfig<string | number | Date | null> {
+export type DynamicInputValue = string | number | Date | null;
+export interface DynamicInputConfig extends DynamicFormFieldValueConfig<DynamicInputValue> {
     inputType?: HtmlInputType;
     placeholder?: string;
     max?: number;
@@ -13,8 +15,9 @@ export interface DynamicInputConfig extends DynamicFormFieldValueConfig<string |
     autocomplete?: 'on' | 'off';
     prefix?: string;
     hideClearIcon?: boolean;
+    showLoader?: WritableSignal<boolean>;
 }
-export declare class DynamicInput extends DynamicFormFieldValueModel<string | number | Date | null> {
+export declare class DynamicInput extends DynamicFormFieldValueModel<DynamicInputValue> {
     inputType: HtmlInputType;
     placeholder: string;
     max: number | null;
@@ -26,6 +29,7 @@ export declare class DynamicInput extends DynamicFormFieldValueModel<string | nu
     autocomplete: 'on' | 'off';
     prefix: string | null;
     hideClearIcon: boolean;
+    showLoader: WritableSignal<boolean>;
     readonly type = "input";
     constructor(config: DynamicInputConfig);
 }

package/lib/controls/radio-group/dynamic-radio-group.model.d.ts

@@ -1,12 +1,12 @@
 import { DynamicFormFieldOptionConfig, DynamicFormFieldOptionModel } from '../../models/classes/dynamic-form-field-option-model';
 export declare const DYNAMIC_FORM_FIELD_RADIO_GROUP = "radio-group";
-export interface DynamicRadioGroupConfig extends DynamicFormFieldOptionConfig<string | number> {
+export interface DynamicRadioGroupConfig extends DynamicFormFieldOptionConfig<string | number | null> {
     /** Placement of the option label. Default is 'before' */
     labelPosition?: 'before' | 'after';
     /** Whether the options are shown inline (horizontally). Default is false */
     inline?: boolean;
 }
-export declare class DynamicRadioGroup extends DynamicFormFieldOptionModel<string | number> {
+export declare class DynamicRadioGroup extends DynamicFormFieldOptionModel<string | number | null> {
     labelPosition: 'before' | 'after';
     inline: boolean;
     readonly type: string;

package/lib/controls/readonly/dynamic-readonly.model.d.ts

@@ -1,7 +1,7 @@
 import { DynamicFormFieldValueConfig, DynamicFormFieldValueModel } from '../../models/classes/dynamic-form-field-value-model';
 export declare const DYNAMIC_FORM_FIELD_READONLY = "readonly";
 export type DynamicReadonlyValue = string | number | null;
-export interface DynamicReadonlyConfig extends DynamicFormFieldValueConfig<DynamicReadonlyValue> {
+export interface DynamicReadonlyConfig extends Omit<DynamicFormFieldValueConfig<DynamicReadonlyValue>, 'validators' | 'relations' | 'updateOn'> {
 }
 export declare class DynamicReadonly extends DynamicFormFieldValueModel<DynamicReadonlyValue> {
     readonly type = "readonly";

package/lib/controls/select/dynamic-select.model.d.ts

@@ -1,7 +1,14 @@
 import { DynamicFormFieldOptionConfig, DynamicFormFieldOptionModel } from '../../models/classes/dynamic-form-field-option-model';
 export declare const DYNAMIC_FORM_FIELD_SELECT = "select";
 export interface DynamicSelectConfig<T> extends DynamicFormFieldOptionConfig<T> {
+    /**
+     * Show the native dropdown instead of the Angular Material styled dropdown
+     */
     native?: boolean;
+    /**
+     * Whether it is possible to select multiple options.
+     * Default value is false
+     */
     multiple?: boolean;
 }
 export declare class DynamicSelect<T> extends DynamicFormFieldOptionModel<T> {

package/lib/controls/textarea/dynamic-textarea.model.d.ts

@@ -2,12 +2,35 @@ import { DynamicFormFieldValueConfig, DynamicFormFieldValueModel } from '../../m
 export declare const DYNAMIC_FORM_FIELD_TEXTAREA = "textarea";
 export type DynamicTextareaValue = string | null;
 export interface DynamicTextareaConfig extends DynamicFormFieldValueConfig<DynamicTextareaValue> {
+    /**
+     * Placeholder text inside the textarea.
+     * Only visible when the field is empty and in focus.
+     */
     placeholder?: string;
+    /**
+     * Minimum amount of characters needed in the textarea
+     */
     minLength?: number;
+    /**
+     * Maximum amount of characters it is possible to fill in the textarea
+     */
     maxLength?: number;
+    /**
+     * Enables or disabled the browser natie autocomplete bubble when the control is in focus.
+     * Default value is 'off'
+     */
     autocomplete?: 'on' | 'off';
+    /**
+     * Amount of rows the textarea initializes on
+     */
     rows?: number;
+    /**
+     * Whether the textare automatically resizes to fit its content
+     */
     resize?: boolean;
+    /**
+     * Maximum amount of rows the textarea show resize to
+     */
     resizeMaxRows?: number;
 }
 export declare class DynamicTextarea extends DynamicFormFieldValueModel<DynamicTextareaValue> {

package/lib/models/classes/dynamic-form-field-base.d.ts

@@ -6,6 +6,9 @@ export interface DynamicFormField {
     model: DynamicFormFieldModel;
     change: EventEmitter<any>;
 }
+/**
+ * Base class for the DynamicFormField component classes
+ */
 export declare abstract class DynamicFormFieldBase implements DynamicFormField {
     group: UntypedFormGroup;
     model: DynamicFormFieldModel;

package/lib/models/classes/dynamic-form-field-model.d.ts

@@ -2,6 +2,9 @@ import { Observable } from 'rxjs';
 import { DynamicFormFieldConfig } from '../interfaces/dynamic-form-field-config.interface';
 import { DynamicFormFieldRelation } from '../interfaces/dynamic-form-field-relation.interface';
 import { DynamicFormValidator } from '../interfaces/dynamic-form-validator.interface';
+/**
+ * Base class for all DynamicFormFields
+ */
 export declare abstract class DynamicFormFieldModel {
     id: string;
     width: number;

package/lib/models/classes/dynamic-form-field-value-model.d.ts

@@ -1,18 +1,33 @@
-import { Observable } from 'rxjs';
 import { DynamicFormFieldConfig } from '../interfaces/dynamic-form-field-config.interface';
 import { DynamicFormFieldModel } from './dynamic-form-field-model';
 export interface DynamicFormFieldValueConfig<T> extends DynamicFormFieldConfig {
+    /**
+     * The value of the control.
+     * This value will change when the control is used.
+     * @optional
+     */
     value?: T;
+    /**
+     * The default value of the control when initializing or resetting the control.
+     * @optional
+     */
     defaultValue?: T;
+    /**
+     * A function that gets called everytime the value of the control changes.
+     * Passes the value of the control as parameter.
+     * If you don't want to get an event on every keystroke without delay, use the ReactiveFormsModule `valueChanges` Observable
+     * @optional
+     */
+    valueChanged?: (val: T | null) => any;
 }
-export declare abstract class DynamicFormFieldValueModel<T> extends DynamicFormFieldModel {
-    valueChanges: Observable<T | null>;
-    private _defaultValue;
-    private _value;
+/**
+ * Base class for a DynamicFormField with a value
+ */
+export declare abstract class DynamicFormFieldValueModel<T = unknown> extends DynamicFormFieldModel {
+    defaultValue: T | null;
     private _value$;
+    private _valueChanged;
     constructor(config: DynamicFormFieldValueConfig<T>);
-    get defaultValue(): T | null;
-    set defaultValue(val: T | null);
     get value(): T | null;
     set value(val: T | null);
 }

package/lib/models/interfaces/dynamic-form-field-config.interface.d.ts

@@ -1,6 +1,15 @@
 import { DynamicFormFieldRelation } from './dynamic-form-field-relation.interface';
 import { DynamicFormValidator } from './dynamic-form-validator.interface';
+/**
+ * Base configuration object for each Dynamic Form Field.
+ * Expects a generic type describing the type of the value the control holds.
+ */
 export interface DynamicFormFieldConfig {
+    /**
+     * Name used as FormControlName
+     * @required
+     */
+    name: string;
     /**
      * Whether the control has to be disabled.
      * Default value is false.
@@ -19,21 +28,11 @@ export interface DynamicFormFieldConfig {
      * @optional
      */
     id?: string;
-    /**
-     * Sets the width of the field, based on percentages. Default value is 100.
-     * @optional
-     */
-    width?: number;
     /**
      * Used as mat-label when provided
      * @optional
      */
     label?: string | null;
-    /**
-     * Name used as FormControlName
-     * @required
-     */
-    name: string;
     /**
      * Hint text underneath the FormControl
      * @optional
@@ -61,4 +60,9 @@ export interface DynamicFormFieldConfig {
      * @optional
      */
     updateOn?: 'submit' | 'blur' | 'change';
+    /**
+     * Sets the width of the field, based on percentages. Default value is 100.
+     * @optional
+     */
+    width?: number;
 }

package/lib/models/interfaces/dynamic-form-field-relation.interface.d.ts

@@ -15,8 +15,8 @@ export interface RelationCondition {
     fieldName?: string;
     /**
      * Path to the related field.
-     * This can be used when working with nested FormGroups and you want to relate a field in a different group.
-     * */
+     * This must be used when working with nested FormGroups and you want to relate a field in a different group.
+     */
     path?: string;
     /** Method that returns true when the condition is met. The passed parameter is the value of the depended field */
     value: (val: any) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olafvv/ngx-dynamic-form",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "peerDependencies": {
     "@angular/common": "^16.2.12",
     "@angular/core": "^16.2.12",