@stemy/ngx-dynamic-form 19.8.15 → 19.8.17

package/ngx-dynamic-form/common-types.d.ts

@@ -185,14 +185,55 @@ export type FormFieldExpressions = {
     "props.required"?: FormFieldExpression<boolean>;
 };
 export interface FormFieldConfig<T = FormFieldProps> extends FormlyFieldConfig<T> {
+    /**
+     * Conditional check if the field should be serialized or not, normal serialization can happen even if the field is hidden
+     */
     serialize?: FormFieldConditionFn;
+    /**
+     * This is a custom serializer callback function.
+     */
     serializer?: FormFieldSerializer;
+    /**
+     * Puts the field in a custom field set
+     */
     fieldSet?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field control (instead of key || id)
+     */
+    controlTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field label (instead of key || id)
+     */
+    labelTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field input (instead of key || id)
+     */
+    inputTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field prefix (instead of key || id)
+     */
+    prefixTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field suffix (instead of key || id)
+     */
+    suffixTemplateKey?: string;
+    /**
+     * Gives purpose to a field (can be used as a filter in serialization)
+     */
     purposes?: string[];
+    /**
+     * Use this field as a field set instead of a keyed form group
+     */
     asFieldSet?: boolean;
     priority?: number;
     fieldGroup?: FormFieldConfig[];
+    /**
+     * Definition of how array items look
+     */
     fieldArray?: FormFieldConfig;
+    /**
+     * Custom field hook definitions
+     */
     hooks: FormHookConfig;
     expressions: FormFieldExpressions;
     readonly parent?: FormFieldConfig;
@@ -287,6 +328,26 @@ export type FormFieldData = Pick<FormFieldProps, "label" | "labelAlign" | "descr
      * Puts the field in a custom field set
      */
     fieldSet?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field control (instead of key || id)
+     */
+    controlTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field label (instead of key || id)
+     */
+    labelTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field input (instead of key || id)
+     */
+    inputTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field prefix (instead of key || id)
+     */
+    prefixTemplateKey?: string;
+    /**
+     * Optional key to use when requesting a ng-template for the field suffix (instead of key || id)
+     */
+    suffixTemplateKey?: string;
     /**
      * Gives purpose to a field (can be used as a filter in serialization)
      */
@@ -334,6 +395,7 @@ export type FormFieldSetData = RequireAtLeastOne<Pick<FormFieldData, "classes" |
 };
 export type AsyncSubmitMode = "click" | "submit" | "all";
 export type AsyncSubmitMethod = (form: IDynamicForm, context?: any, ev?: MouseEvent) => Promise<IAsyncMessage>;
+export type FormTemplateType = "control" | "label" | "input" | "prefix" | "suffix";
 export type FormFieldCustomizer = (field: FormFieldConfig, options: FormBuilderOptions, injector: Injector, property: OpenApiSchemaProperty, schema: OpenApiSchema) => MaybePromise<MaybeArray<FormFieldConfig>>;
 export interface ConfigForSchemaOptionsBase extends FormBuilderOptionsBase {
     fieldCustomizer?: FormFieldCustomizer;

package/ngx-dynamic-form/components/dynamic-form/dynamic-form.component.d.ts

@@ -5,12 +5,15 @@ import { EventsService } from "@stemy/ngx-utils";
 import { FormFieldChangeEvent, FormFieldConfig, FormFieldLabelCustomizer, FormSerializeResult, IDynamicForm } from "../../common-types";
 import { DynamicFormBuilderService } from "../../services/dynamic-form-builder.service";
 import { DynamicFormService } from "../../services/dynamic-form.service";
+import { DynamicFormTemplateService } from "../../services/dynamic-form-template.service";
 import * as i0 from "@angular/core";
 export declare class DynamicFormComponent implements IDynamicForm {
     readonly forms: DynamicFormService;
+    protected readonly templates: DynamicFormTemplateService;
     protected readonly builder: DynamicFormBuilderService;
     protected readonly events: EventsService;
     protected readonly languages: import("@stemy/ngx-utils").ILanguageService;
+    readonly globalTemplatePrefix: import("@angular/core").InputSignal<string>;
     readonly labelPrefix: import("@angular/core").InputSignal<string>;
     readonly labelCustomizer: import("@angular/core").InputSignal<FormFieldLabelCustomizer>;
     readonly testId: import("@angular/core").InputSignal<string>;
@@ -32,12 +35,12 @@ export declare class DynamicFormComponent implements IDynamicForm {
     readonly onValueChanges: import("@angular/core").OutputRef<FormFieldChangeEvent>;
     readonly onInit: import("@angular/core").OutputRef<FormFieldChangeEvent>;
     readonly options: FormlyFormOptions;
-    constructor(forms: DynamicFormService);
+    constructor(forms: DynamicFormService, templates: DynamicFormTemplateService);
     submit(): void;
     reset(): void;
     serialize(validate?: boolean, ...purposes: string[]): Promise<FormSerializeResult>;
     getField(path: string): FormFieldConfig;
     getControl(path: string): AbstractControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "dynamic-form", never, { "labelPrefix": { "alias": "labelPrefix"; "required": false; "isSignal": true; }; "labelCustomizer": { "alias": "labelCustomizer"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "useTabs": { "alias": "useTabs"; "required": false; "isSignal": true; }; "legacyLabels": { "alias": "legacyLabels"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; "onFieldChanges": "onFieldChanges"; "onValueChanges": "onValueChanges"; "onInit": "onInit"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "dynamic-form", never, { "globalTemplatePrefix": { "alias": "globalTemplatePrefix"; "required": false; "isSignal": true; }; "labelPrefix": { "alias": "labelPrefix"; "required": false; "isSignal": true; }; "labelCustomizer": { "alias": "labelCustomizer"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "useTabs": { "alias": "useTabs"; "required": false; "isSignal": true; }; "legacyLabels": { "alias": "legacyLabels"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; "onFieldChanges": "onFieldChanges"; "onValueChanges": "onValueChanges"; "onInit": "onInit"; }, never, ["*"], false, never>;
 }

package/ngx-dynamic-form/directives/dynamic-form-template.directive.d.ts

@@ -0,0 +1,22 @@
+import { OnChanges, OnDestroy, TemplateRef } from "@angular/core";
+import { DynamicFormTemplateService } from "../services/dynamic-form-template.service";
+import { FormTemplateType } from "../common-types";
+import * as i0 from "@angular/core";
+export declare class DynamicFormTemplateDirective implements OnChanges, OnDestroy {
+    readonly templates: DynamicFormTemplateService;
+    readonly template: TemplateRef<any>;
+    control: string;
+    label: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+    setPrefix: string;
+    setSuffix: string;
+    protected setting: [string, FormTemplateType];
+    constructor(templates: DynamicFormTemplateService, template: TemplateRef<any>);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    selectType(): [string, FormTemplateType];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicFormTemplateDirective, "ng-template[control],                ng-template[label],                ng-template[input],                ng-template[prefix],                ng-template[suffix],                ng-template[setPrefix],                ng-template[setSuffix]", never, { "control": { "alias": "control"; "required": false; }; "label": { "alias": "label"; "required": false; }; "input": { "alias": "input"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "setPrefix": { "alias": "setPrefix"; "required": false; }; "setSuffix": { "alias": "setSuffix"; "required": false; }; }, {}, never, never, false, never>;
+}

package/ngx-dynamic-form/ngx-dynamic-form.imports.d.ts

@@ -1,9 +1,9 @@
-import { AsyncSubmitDirective } from "./directives/async-submit.directive";
+import { Type } from "@angular/core";
 import { DynamicFormComponent } from "./components/dynamic-form/dynamic-form.component";
 import { DynamicFormArrayComponent } from "./components/dynamic-form-array/dynamic-form-array.component";
 import { DynamicFormChipsComponent } from "./components/dynamic-form-chips/dynamic-form-chips.component";
 import { DynamicFormTranslationComponent } from "./components/dynamic-form-translation/dynamic-form-translation.component";
 import { DynamicFormAlertComponent } from "./components/dynamic-form-alert/dynamic-form-alert.component";
-export declare const components: (typeof DynamicFormComponent | typeof DynamicFormArrayComponent | typeof DynamicFormChipsComponent | typeof DynamicFormTranslationComponent | typeof DynamicFormAlertComponent)[];
-export declare const directives: (typeof AsyncSubmitDirective)[];
-export declare const pipes: any[];
+export declare const components: (typeof DynamicFormArrayComponent | typeof DynamicFormComponent | typeof DynamicFormChipsComponent | typeof DynamicFormTranslationComponent | typeof DynamicFormAlertComponent)[];
+export declare const directives: Type<any>[];
+export declare const pipes: Type<any>[];

package/ngx-dynamic-form/ngx-dynamic-form.module.d.ts

@@ -14,16 +14,18 @@ import * as i10 from "./components/dynamic-form-field/dynamic-form-field.compone
 import * as i11 from "./components/dynamic-form-fieldset/dynamic-form-fieldset.component";
 import * as i12 from "./components/dynamic-form-group/dynamic-form-group.component";
 import * as i13 from "./directives/async-submit.directive";
-import * as i14 from "@angular/common";
-import * as i15 from "@angular/forms";
-import * as i16 from "@stemy/ngx-utils";
-import * as i17 from "@ngx-formly/core";
-import * as i18 from "@ngx-formly/core/select";
+import * as i14 from "./directives/dynamic-form-template.directive";
+import * as i15 from "./pipes/dynamic-form-template.pipe";
+import * as i16 from "@angular/common";
+import * as i17 from "@angular/forms";
+import * as i18 from "@stemy/ngx-utils";
+import * as i19 from "@ngx-formly/core";
+import * as i20 from "@ngx-formly/core/select";
 export declare class NgxDynamicFormModule {
     private static getProviders;
     static forRoot(config?: IDynamicFormModuleConfig): ModuleWithProviders<NgxDynamicFormModule>;
     static provideForms(config?: IDynamicFormModuleConfig): EnvironmentProviders;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxDynamicFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDynamicFormModule, [typeof i1.DynamicFieldType, typeof i2.DynamicFormComponent, typeof i3.DynamicFormArrayComponent, typeof i4.DynamicFormChipsComponent, typeof i5.DynamicFormStaticComponent, typeof i6.DynamicFormTranslationComponent, typeof i7.DynamicFormUploadComponent, typeof i8.DynamicFormWysiwygComponent, typeof i9.DynamicFormAlertComponent, typeof i10.DynamicFormFieldComponent, typeof i11.DynamicFormFieldsetComponent, typeof i12.DynamicFormGroupComponent, typeof i13.AsyncSubmitDirective], [typeof i14.CommonModule, typeof i15.FormsModule, typeof i15.ReactiveFormsModule, typeof i16.NgxUtilsModule, typeof i17.FormlyModule, typeof i18.FormlySelectModule], [typeof i1.DynamicFieldType, typeof i2.DynamicFormComponent, typeof i3.DynamicFormArrayComponent, typeof i4.DynamicFormChipsComponent, typeof i5.DynamicFormStaticComponent, typeof i6.DynamicFormTranslationComponent, typeof i7.DynamicFormUploadComponent, typeof i8.DynamicFormWysiwygComponent, typeof i9.DynamicFormAlertComponent, typeof i10.DynamicFormFieldComponent, typeof i11.DynamicFormFieldsetComponent, typeof i12.DynamicFormGroupComponent, typeof i13.AsyncSubmitDirective, typeof i15.FormsModule, typeof i15.ReactiveFormsModule, typeof i16.NgxUtilsModule, typeof i17.FormlyModule, typeof i18.FormlySelectModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDynamicFormModule, [typeof i1.DynamicFieldType, typeof i2.DynamicFormComponent, typeof i3.DynamicFormArrayComponent, typeof i4.DynamicFormChipsComponent, typeof i5.DynamicFormStaticComponent, typeof i6.DynamicFormTranslationComponent, typeof i7.DynamicFormUploadComponent, typeof i8.DynamicFormWysiwygComponent, typeof i9.DynamicFormAlertComponent, typeof i10.DynamicFormFieldComponent, typeof i11.DynamicFormFieldsetComponent, typeof i12.DynamicFormGroupComponent, typeof i13.AsyncSubmitDirective, typeof i14.DynamicFormTemplateDirective, typeof i15.DynamicFormTemplatePipe], [typeof i16.CommonModule, typeof i17.FormsModule, typeof i17.ReactiveFormsModule, typeof i18.NgxUtilsModule, typeof i19.FormlyModule, typeof i20.FormlySelectModule], [typeof i1.DynamicFieldType, typeof i2.DynamicFormComponent, typeof i3.DynamicFormArrayComponent, typeof i4.DynamicFormChipsComponent, typeof i5.DynamicFormStaticComponent, typeof i6.DynamicFormTranslationComponent, typeof i7.DynamicFormUploadComponent, typeof i8.DynamicFormWysiwygComponent, typeof i9.DynamicFormAlertComponent, typeof i10.DynamicFormFieldComponent, typeof i11.DynamicFormFieldsetComponent, typeof i12.DynamicFormGroupComponent, typeof i13.AsyncSubmitDirective, typeof i14.DynamicFormTemplateDirective, typeof i15.DynamicFormTemplatePipe, typeof i17.FormsModule, typeof i17.ReactiveFormsModule, typeof i18.NgxUtilsModule, typeof i19.FormlyModule, typeof i20.FormlySelectModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgxDynamicFormModule>;
 }

package/ngx-dynamic-form/pipes/dynamic-form-template.pipe.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy, OnInit, PipeTransform, TemplateRef } from "@angular/core";
+import { Subscription } from "rxjs";
+import { DynamicFormTemplateService } from "../services/dynamic-form-template.service";
+import { FormFieldConfig, FormTemplateType } from "../common-types";
+import * as i0 from "@angular/core";
+export declare class DynamicFormTemplatePipe implements PipeTransform, OnInit, OnDestroy {
+    readonly templates: DynamicFormTemplateService;
+    protected templatesUpdated: Subscription;
+    protected cachedKey: string;
+    protected cachedType: FormTemplateType;
+    protected cachedTemplate: TemplateRef<any>;
+    constructor(templates: DynamicFormTemplateService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    transform(field: FormFieldConfig, type: FormTemplateType): TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormTemplatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DynamicFormTemplatePipe, "dynamicFormTemplate", false>;
+}

package/ngx-dynamic-form/services/dynamic-form-template.service.d.ts

@@ -0,0 +1,21 @@
+import { TemplateRef } from "@angular/core";
+import { Subject } from "rxjs";
+import { GlobalTemplateService } from "@stemy/ngx-utils";
+import { FormTemplateType } from "../common-types";
+import * as i0 from "@angular/core";
+export declare class DynamicFormTemplateService {
+    protected readonly globalTemplates: GlobalTemplateService;
+    readonly templatesUpdated: Subject<void>;
+    protected templates: Map<FormTemplateType, Map<string, TemplateRef<any>>>;
+    protected globalTemplatePrefix: string;
+    get globalPrefix(): string;
+    set globalPrefix(value: string);
+    constructor(globalTemplates: GlobalTemplateService);
+    isValidType(type: string): boolean;
+    get(type: FormTemplateType, key: string): TemplateRef<any>;
+    protected getGlobalTemplate(type: FormTemplateType, key: string): TemplateRef<any>;
+    add(key: string, type: FormTemplateType, template: TemplateRef<any>): void;
+    remove(key: string, type: FormTemplateType): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormTemplateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicFormTemplateService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stemy/ngx-dynamic-form",
-  "version": "19.8.15",
+  "version": "19.8.17",
   "license": "MIT",
   "public": true,
   "repository": "https://github.com/stemyke/ngx-dynamic-form.git",

package/public_api.d.ts

@@ -1,14 +1,17 @@
-export { FORM_ROOT_ID, FormFieldKey, FormFieldLabelCustomizer, FormBuilderOptions, FormFieldArrayItemsAction, FormFieldProps, FormFieldSerializer, FormHookFn, FormHookConfig, FormFieldExpression, FormFieldExpressions, FormFieldConfig, FormFieldType, FormFieldChangeEvent, FormSerializeResult, FormSelectOption, FormSelectOptions, FormSelectOptionsFactory, FormFieldConditionFn, FormFieldCondition, IDynamicForm, ValidationMessageFn, ValidatorFn, ValidatorExpression, Validators, AsyncValidatorFn, AsyncValidatorExpression, AsyncValidators, AllValidationErrors, FormFieldCustom, FormFieldData, FormInputData, FormSelectData, FormStaticData, FormUploadData, FormGroupData, FormArrayData, FormSerializerData, FormFieldSetData, AsyncSubmitMode, AsyncSubmitMethod, FormFieldCustomizer, ConfigForSchemaOptions, DynamicFormStatus, DynamicFormUpdateOn, IDynamicFormModuleConfig, } from "./ngx-dynamic-form/common-types";
+export { FORM_ROOT_ID, FormFieldKey, FormFieldLabelCustomizer, FormBuilderOptions, FormFieldArrayItemsAction, FormFieldProps, FormFieldSerializer, FormHookFn, FormHookConfig, FormFieldExpression, FormFieldExpressions, FormFieldConfig, FormFieldType, FormFieldChangeEvent, FormSerializeResult, FormSelectOption, FormSelectOptions, FormSelectOptionsFactory, FormFieldConditionFn, FormFieldCondition, IDynamicForm, ValidationMessageFn, ValidatorFn, ValidatorExpression, Validators, AsyncValidatorFn, AsyncValidatorExpression, AsyncValidators, AllValidationErrors, FormFieldCustom, FormFieldData, FormInputData, FormSelectData, FormStaticData, FormUploadData, FormGroupData, FormArrayData, FormSerializerData, FormFieldSetData, AsyncSubmitMode, AsyncSubmitMethod, FormTemplateType, FormFieldCustomizer, ConfigForSchemaOptions, DynamicFormStatus, DynamicFormUpdateOn, IDynamicFormModuleConfig, } from "./ngx-dynamic-form/common-types";
 export { IFormFieldCustomizer, customizeFormField } from "./ngx-dynamic-form/utils/customizer";
 export { FormInput, FormSelect, FormStatic, FormUpload, FormGroup, FormArray, FormSerializable, FormFieldSet } from "./ngx-dynamic-form/utils/decorators";
 export { addFieldValidators, removeFieldValidators, jsonValidation, requiredValidation, translationValidation, phoneValidation, emailValidation, arrayLengthValidation, minLengthValidation, maxLengthValidation, minValueValidation, maxValueValidation } from "./ngx-dynamic-form/utils/validation";
 export { replaceSpecialChars, controlValues, controlStatus, convertToDateFormat, convertToDate, convertToNumber, getFieldByPath, getFieldsByPredicate, getFieldsByKey, getSelectOptions, replaceFieldArray, clearFieldArray, insertToFieldArray, removeFromFieldArray, setFieldDefault, setFieldValue, setFieldProps, setFieldProp, setFieldSerialize, setFieldHidden, setFieldDisabled, setFieldHooks, isFieldVisible, isFieldHidden, MIN_INPUT_NUM, MAX_INPUT_NUM, EDITOR_FORMATS } from "./ngx-dynamic-form/utils/misc";
 export { RichTranslationModel } from "./ngx-dynamic-form/models/rich-translation.model";
 export { TranslationModel } from "./ngx-dynamic-form/models/translation.model";
+export { DynamicFormService } from "./ngx-dynamic-form/services/dynamic-form.service";
 export { DynamicFormBuilderService } from "./ngx-dynamic-form/services/dynamic-form-builder.service";
 export { DynamicFormSchemaService } from "./ngx-dynamic-form/services/dynamic-form-schema.service";
-export { DynamicFormService } from "./ngx-dynamic-form/services/dynamic-form.service";
+export { DynamicFormTemplateService } from "./ngx-dynamic-form/services/dynamic-form-template.service";
 export { AsyncSubmitDirective } from "./ngx-dynamic-form/directives/async-submit.directive";
+export { DynamicFormTemplateDirective } from "./ngx-dynamic-form/directives/dynamic-form-template.directive";
+export { DynamicFormTemplatePipe } from "./ngx-dynamic-form/pipes/dynamic-form-template.pipe";
 export { DynamicFieldType } from "./ngx-dynamic-form/components/base/dynamic-field-type";
 export { DynamicFormComponent } from "./ngx-dynamic-form/components/dynamic-form/dynamic-form.component";
 export { DynamicFormArrayComponent } from "./ngx-dynamic-form/components/dynamic-form-array/dynamic-form-array.component";