@olafvv/ngx-dynamic-form 0.2.0 → 0.4.0

package/lib/controls/controls.d.ts

@@ -1,6 +1,7 @@
 export * from './button-toggles/dynamic-button-toggles.model';
 export * from './button/dynamic-button.model';
 export * from './checkbox/dynamic-checkbox.model';
+export * from './datepicker/dynamic-datepicker.model';
 export * from './input/dynamic-input.model';
 export * from './radio-group/dynamic-radio-group.model';
 export * from './readonly/dynamic-readonly.model';

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,24 @@
+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;
+export interface DynamicDatepickerConfig extends DynamicFormFieldValueConfig<DynamicDatepickerControlValue> {
+    /**
+     * Maximum date selectable in the datepicker
+     * {DynamicDatepickerControlValue}
+     * */
+    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

@@ -3,6 +3,7 @@ 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> {
     inputType?: HtmlInputType;
+    placeholder?: string;
     max?: number;
     min?: number;
     maxLength?: number;
@@ -15,6 +16,7 @@ export interface DynamicInputConfig extends DynamicFormFieldValueConfig<string |
 }
 export declare class DynamicInput extends DynamicFormFieldValueModel<string | number | Date | null> {
     inputType: HtmlInputType;
+    placeholder: string;
     max: number | null;
     min: number | null;
     maxLength: number | null;

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

@@ -2,14 +2,12 @@ import { EventEmitter } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MatSelectChange } from '@angular/material/select';
 import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
-import { DynamicFormFieldOption } from '../../models/classes/dynamic-form-field-option-model';
 import { DynamicSelect } from './dynamic-select.model';
 import * as i0 from "@angular/core";
 export declare class DynamicSelectComponent extends DynamicFormFieldBase {
     model: DynamicSelect<string>;
     group: UntypedFormGroup;
     change: EventEmitter<MatSelectChange>;
-    trackByFn(index: number, option: DynamicFormFieldOption<unknown>): unknown;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DynamicSelectComponent, "dynamic-select", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }

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

@@ -2,6 +2,7 @@ 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?: string;
     minLength?: number;
     maxLength?: number;
     autocomplete?: 'on' | 'off';
@@ -10,6 +11,7 @@ export interface DynamicTextareaConfig extends DynamicFormFieldValueConfig<Dynam
     resizeMaxRows?: number;
 }
 export declare class DynamicTextarea extends DynamicFormFieldValueModel<DynamicTextareaValue> {
+    placeholder: string;
     minLength: number | null;
     maxLength: number | null;
     autocomplete: 'on' | 'off';

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

@@ -3,7 +3,6 @@ import { DynamicFormFieldConfig } from '../interfaces/dynamic-form-field-config.
 import { DynamicFormFieldRelation } from '../interfaces/dynamic-form-field-relation.interface';
 import { DynamicFormValidator } from '../interfaces/dynamic-form-validator.interface';
 export declare abstract class DynamicFormFieldModel {
-    hidden: boolean;
     id: string;
     width: number;
     label: string | null;
@@ -15,7 +14,10 @@ export declare abstract class DynamicFormFieldModel {
     disabledChange: Observable<boolean>;
     abstract readonly type: string;
     private readonly disabled$;
+    private readonly $hidden;
     constructor(config: DynamicFormFieldConfig);
     get disabled(): boolean;
     set disabled(disable: boolean);
+    get hidden(): boolean;
+    set hidden(hidden: boolean);
 }

package/lib/models/classes/dynamic-form-validators.d.ts

@@ -1,15 +1,10 @@
 import { DynamicFormValidator } from '../interfaces/dynamic-form-validator.interface';
 export declare class DynamicFormValidators {
     /**
-     * Default required validator, the control must contain a value
-     * @param msg
-     */
-    static required(msg?: string): DynamicFormValidator;
-    /**
-     * Ddefault requiredTrue validator, the value of the control has to be true
+     * Default email validator, the value of the control has to be a valid email address
      * @param msg
      */
-    static requiredTrue(msg?: string): DynamicFormValidator;
+    static email(msg?: string): DynamicFormValidator;
     /**
      * Default min validator, the value has to be greater or equal than the the provided number
      * @param min number
@@ -34,15 +29,20 @@ export declare class DynamicFormValidators {
      * @param msg
      */
     static maxLength(max: number, msg?: string): DynamicFormValidator;
-    /**
-     * Ddefault email validator, the value of the control has to be a valid email address
-     * @param msg
-     */
-    static email(msg?: string): DynamicFormValidator;
     /**
      * Default pattern validator, the value of the control has to match the provided pattern
      * @param pattern: string | RegExp
      * @param msg
      */
     static pattern(pattern: string | RegExp, msg?: string): DynamicFormValidator;
+    /**
+     * Default required validator, the control must contain a value
+     * @param msg
+     */
+    static required(msg?: string): DynamicFormValidator;
+    /**
+     * Default requiredTrue validator, the value of the control has to be true
+     * @param msg
+     */
+    static requiredTrue(msg?: string): DynamicFormValidator;
 }

package/lib/models/constants/dynamic-relations.const.d.ts

@@ -1,2 +1,10 @@
-import { DynamicRelationAction } from '../interfaces/dynamic-form-field-relation.interface';
+import { Injector } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
+import { RelationActionType } from '../interfaces/dynamic-form-field-relation.interface';
+export interface DynamicRelationAction {
+    type: RelationActionType;
+    reversedType?: string;
+    change(hasMatch: boolean, model: DynamicFormFieldModel, control: UntypedFormControl, injector: Injector): void;
+}
 export declare const RELATION_ACTIONS: DynamicRelationAction[];

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

@@ -51,8 +51,13 @@ export interface DynamicFormFieldConfig {
     relations?: DynamicFormFieldRelation[];
     /**
      * Event name for the control to update on.
-     * Possible values: 'change', 'blur' or 'submit'.
-     * Default values is 'blur'
+     * This will determine when Angular is checking the validators
+     * Possible values:
+     * - `change`: on every change event on the FormControl
+     * - `blur`: on the blur event of the FormControl
+     * - `submit`: when the parent form of the FormControl is submitted
+     *
+     * Default value is 'blur'.
      * @optional
      */
     updateOn?: 'submit' | 'blur' | 'change';

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

@@ -1,6 +1,3 @@
-import { Injector } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
-import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
 export declare enum RelationActionType {
     DISABLED = "DISABLED",
     ENABLED = "ENABLED",
@@ -14,16 +11,18 @@ export declare enum RelationOperator {
     OR = "OR"
 }
 export interface RelationCondition {
-    fieldName: string;
+    /** Name of a field in the same form this field is depended on */
+    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.
+     * */
+    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;
 }
 export interface DynamicFormFieldRelation {
     actionType: RelationActionType;
-    operator?: RelationOperator;
     conditions: RelationCondition[];
-}
-export interface DynamicRelationAction {
-    type: RelationActionType;
-    reversedType?: string;
-    change(hasMatch: boolean, model: DynamicFormFieldModel, control: UntypedFormControl, injector: Injector): void;
+    operator?: RelationOperator;
 }

package/package.json

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