@olafvv/ngx-dynamic-form 0.0.2

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

@@ -0,0 +1,18 @@
+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 {
+    value?: T;
+    defaultValue?: T;
+}
+export declare abstract class DynamicFormFieldValueModel<T> extends DynamicFormFieldModel {
+    valueChanges: Observable<T | null>;
+    private _defaultValue;
+    private _value;
+    private _value$;
+    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/classes/dynamic-form-validators.d.ts

@@ -0,0 +1,48 @@
+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
+     * @param msg
+     */
+    static requiredTrue(msg?: string): DynamicFormValidator;
+    /**
+     * Default min validator, the value has to be greater or equal than the the provided number
+     * @param min number
+     * @param msg
+     */
+    static min(min: number, msg?: string): DynamicFormValidator;
+    /**
+     * Default max validator, the value has to be less or equal than the the provided number
+     * @param max number
+     * @param msg
+     */
+    static max(max: number, msg?: string): DynamicFormValidator;
+    /**
+     * Default minLength validator, the value has to contain a minimum amount of characters
+     * @param min number
+     * @param msg
+     */
+    static minLength(min: number, msg?: string): DynamicFormValidator;
+    /**
+     * Default maxLength validator, the value has to contain a maximum amount of characters
+     * @param max number
+     * @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;
+}

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

@@ -0,0 +1,30 @@
+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",
+    HIDDEN = "HIDDEN",
+    VISIBLE = "VISIBLE",
+    REQUIRED = "REQUIRED",
+    OPTIONAL = "OPTIONAL"
+}
+export declare enum RelationOperator {
+    AND = "AND",
+    OR = "OR"
+}
+export interface RelationCondition {
+    fieldName: string;
+    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;
+}
+export declare const RELATION_ACTIONS: DynamicRelationAction[];

package/lib/models/index.d.ts

@@ -0,0 +1,10 @@
+export * from './classes/dynamic-form-field-base-component';
+export * from './classes/dynamic-form-field-model';
+export * from './classes/dynamic-form-field-option-model';
+export * from './classes/dynamic-form-field-value-model';
+export * from './classes/dynamic-form-validators';
+export * from './constants/dynamic-relations.const';
+export * from './interfaces/dynamic-form-field-config.interface';
+export * from './interfaces/dynamic-form-validator.interface';
+export * from './types/dynamic-form-config.type';
+export * from './tokens/dynamic-form-field-map-fn.token';

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

@@ -0,0 +1,60 @@
+import { DynamicFormFieldRelation } from '../constants/dynamic-relations.const';
+import { DynamicFormHook } from '../types/dynamic-form-hook.type';
+import { DynamicFormValidator } from './dynamic-form-validator.interface';
+export interface DynamicFormFieldConfig {
+    /**
+     * Whether the control has to be disabled.
+     * Default value is false.
+     * @optional
+     */
+    disabled?: boolean;
+    /**
+     * Whether the control should be hidden.
+     * Default value is false
+     * @optional
+     */
+    hidden?: boolean;
+    /**
+     * Adds an id attribute to the FormControl.
+     * When not provided, the required 'name' property is used as id
+     * @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
+     */
+    hint?: string;
+    /**
+     * Array of Dynamic Form Validators
+     * @optional
+     */
+    validators?: DynamicFormValidator[];
+    /**
+     * Array of Dynamic Form Relations
+     * @optional
+     */
+    relations?: DynamicFormFieldRelation[];
+    /**
+     * Event name for the control to update on.
+     * Possible values: 'update', 'blur' or 'submit'.
+     * Default values is 'update'
+     * @optional
+     */
+    updateOn?: DynamicFormHook;
+}

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

@@ -0,0 +1,6 @@
+import { ValidatorFn } from '@angular/forms';
+export interface DynamicFormValidator {
+    name: string;
+    validator: ValidatorFn;
+    message?: string;
+}

package/lib/models/tokens/dynamic-form-field-map-fn.token.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export declare const DYNAMIC_FORM_FIELD_MAP_FN: InjectionToken<unknown>;

package/lib/models/types/dynamic-form-config.type.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
+export type DynamicFormConfig = DynamicFormFieldModel[][];

package/lib/models/types/dynamic-form-hook.type.d.ts

@@ -0,0 +1 @@
+export type DynamicFormHook = 'submit' | 'blur' | 'change';

package/lib/models/types/related-form-controls.type.d.ts

@@ -0,0 +1,4 @@
+import { UntypedFormControl } from '@angular/forms';
+export type RelatedFormControls = {
+    [name: string]: UntypedFormControl;
+};

package/lib/services/dynamic-form-relations.service.d.ts

@@ -0,0 +1,26 @@
+import { FormControl, FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { DynamicFormFieldModel } from '../models/classes/dynamic-form-field-model';
+import { RelatedFormControls } from '../models/types/related-form-controls.type';
+import * as i0 from "@angular/core";
+export declare class DynamicFormRelationsService {
+    private _injector;
+    /**
+     * Get an object with all FormField the provided model has a relation with
+     * @param model
+     * @param group
+     * @returns
+     */
+    findRelatedFormField(model: DynamicFormFieldModel, group: FormGroup): RelatedFormControls;
+    getRelationSubscriptions(relatedFormControls: RelatedFormControls, model: DynamicFormFieldModel, control: FormControl): Subscription[];
+    /**
+     * Check the conditions inside the relations
+     * @param relation
+     * @param relatedControl
+     * @param action
+     * @returns
+     */
+    private checkRelationCondition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormRelationsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicFormRelationsService>;
+}

package/lib/services/dynamic-form.service.d.ts

@@ -0,0 +1,42 @@
+import { Type } from '@angular/core';
+import { FormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { DynamicFormField } from '../models/classes/dynamic-form-field-base-component';
+import { DynamicFormFieldModel } from '../models/classes/dynamic-form-field-model';
+import { DynamicFormFieldOption } from '../models/classes/dynamic-form-field-option-model';
+import { DynamicFormConfig } from '../models/types/dynamic-form-config.type';
+import { DynamicFormValidationsService } from './dynamic-validations.service';
+import * as i0 from "@angular/core";
+export type DynamicFormFieldTypeMapFn = (field: DynamicFormFieldModel) => Type<DynamicFormField> | null;
+export declare class DynamicFormService {
+    private DYNAMIC_FORM_FIELD_MAP_FN;
+    private fb;
+    private validatorsService;
+    constructor(DYNAMIC_FORM_FIELD_MAP_FN: DynamicFormFieldTypeMapFn, fb: FormBuilder, validatorsService: DynamicFormValidationsService);
+    /**
+     * Check if there is a function provided to use custom form controls
+     * @param model
+     * @returns
+     */
+    getCustomControlComponentType(model: DynamicFormFieldModel): Type<DynamicFormField> | null;
+    /**
+     * Create a FormGroup from the provided form configuration.
+     * Returns a FormGroup.
+     * @param config
+     * @returns
+     */
+    createFormGroup(config: DynamicFormConfig): UntypedFormGroup;
+    /**
+     * Transform any list (Observable) to a list of DynamicFormFieldOption which is used in any Dynamic Form Field with options (e.g. DynamicSelect).
+     * Generic types:
+     * T = The type of the items in the provided list
+     * K = The type of the value inside an DynamicFormFieldOption
+     * @param listObs
+     * @param labelCb
+     * @param valueCb
+     * @returns
+     */
+    toDynamicOptionListObs<T, K = string>(listObs: Observable<T[]>, labelCb: (item: T) => string, valueCb: (item: T) => K): Observable<DynamicFormFieldOption<K>[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormService, [{ optional: true; }, null, null]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicFormService>;
+}

package/lib/services/dynamic-validations.service.d.ts

@@ -0,0 +1,20 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { DynamicFormValidator } from '../models/interfaces/dynamic-form-validator.interface';
+import * as i0 from "@angular/core";
+export declare class DynamicFormValidationsService {
+    /**
+     * Get all Validator Functions from the validator configuration
+     * @param validatorConfig
+     * @returns
+     */
+    getValidatorFns(validatorConfig: DynamicFormValidator[]): ValidatorFn[];
+    /**
+     * Update the validators on a FormControl based on the provided validator configuration.
+     * This will replace any existing validators on the control or removes all validators when none provided
+     * @param validatorConfig
+     * @param control
+     */
+    updateValidators(validatorConfig: DynamicFormValidator[], control: FormControl): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormValidationsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicFormValidationsService>;
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@olafvv/ngx-dynamic-form",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "rxjs": "^7.5.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/olafvv-ngx-dynamic-form.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/olafvv-ngx-dynamic-form.mjs",
+      "esm": "./esm2022/olafvv-ngx-dynamic-form.mjs",
+      "default": "./fesm2022/olafvv-ngx-dynamic-form.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/components/dynamic-form/dynamic-form.component';
+export * from './lib/controls';
+export * from './lib/models';
+export * from './lib/services/dynamic-form.service';