@stemy/ngx-dynamic-form 19.8.14 → 19.8.16

package/fesm2022/stemy-ngx-dynamic-form.mjs

@@ -4,7 +4,7 @@ import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWi
 import { debounceTime } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Inject, Injectable, untracked, input, inject, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Type, Component, output, Injector, ChangeDetectionStrategy, ViewEncapsulation, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { Inject, Injectable, untracked, input, inject, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Pipe, Type, Component, output, Injector, ChangeDetectionStrategy, ViewEncapsulation, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { outputToObservable, toSignal, rxResource, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -550,6 +550,9 @@ async function toWrapOptions(customizeOrOptions, injector, schema, errorMsg) {
     }
     return new ConfigForSchemaWrap(schemaOptions, "wrap", injector, schema);
 }
+function toStringArray(value) {
+    return (Array.isArray(value) ? value : String(value || "").split(",")).filter(ObjectUtils.isStringWithValue);
+}
 function handleConfigs(configs) {
     return Array.isArray(configs) ? configs : [configs];
 }
@@ -943,6 +946,7 @@ class DynamicFormBuilderService {
         const field = {
             ...this.createFormSerializer(key, data),
             fieldSet: String(data.fieldSet || ""),
+            purposes: toStringArray(data.purposes),
             priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
             wrappers: wrappers.filter(ObjectUtils.isDefined),
             type: data.componentType || type,
@@ -1149,6 +1153,7 @@ class DynamicFormSchemaService {
             layout: property.layout,
             serialize: property.serialize,
             fieldSet: property.fieldSet,
+            purposes: property.purposes || property.purpose,
             priority: property.priority,
             componentType: property.componentType,
             wrappers: wrappers.filter(ObjectUtils.isStringWithValue),
@@ -1512,24 +1517,26 @@ class DynamicFormService {
             group.updateValueAndValidity();
         });
     }
-    async serializeForm(form, validate = true) {
+    async serializeForm(form, validate = true, ...purposes) {
         const fields = untracked(() => form.config());
         if (!fields)
             return null;
         if (validate) {
             await this.validateForm(form);
         }
-        return this.serialize(fields);
+        return this.serialize(fields, purposes);
     }
-    async serialize(fields) {
+    async serialize(fields, purposes = []) {
         const result = {};
+        purposes = purposes ?? [];
         if (!fields)
             return result;
         for (const field of fields) {
             const serializer = field.serializer;
             const key = `${field.key}`;
             const shouldSerialize = field.serialize?.(field, this.injector) ?? field.props?.hidden !== true;
-            if (!shouldSerialize) {
+            const includes = purposes.length > 0 ? Array.prototype.includes.bind(field.purposes ?? []) : null;
+            if (!shouldSerialize || (includes && !includes(purposes))) {
                 continue;
             }
             if (ObjectUtils.isFunction(serializer)) {
@@ -1538,7 +1545,7 @@ class DynamicFormService {
             }
             const control = field.formControl;
             if (field.fieldGroup) {
-                const group = await this.serialize(field.fieldGroup);
+                const group = await this.serialize(field.fieldGroup, purposes);
                 if (field.key && !field.asFieldSet) {
                     result[key] = !field.fieldArray ? group : Object.values(group);
                     continue;
@@ -1579,6 +1586,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                     args: [API_SERVICE]
                 }] }] });
 
+const templateTypes = ["control", "label", "input", "prefix", "suffix", "setPrefix", "setSuffix"];
+class DynamicFormTemplateService {
+    templatesUpdated;
+    templates;
+    constructor() {
+        this.templatesUpdated = new Subject();
+        this.templates = new Map();
+        templateTypes.forEach(templateType => {
+            this.templates.set(templateType, new Map());
+        });
+    }
+    isValidType(type) {
+        return templateTypes.includes(type);
+    }
+    get(type, key) {
+        if (!this.templates.has(type))
+            return null;
+        const templates = this.templates.get(type);
+        return templates.has(key) ? templates.get(key) : null;
+    }
+    add(key, type, template) {
+        if (!this.templates.has(type)) {
+            this.templates.set(type, new Map());
+        }
+        this.templates.get(type).set(key, template);
+        this.templatesUpdated.next();
+    }
+    remove(key, type) {
+        if (!this.templates.has(type))
+            return;
+        this.templates.get(type).delete(key);
+        this.templatesUpdated.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class AsyncSubmitDirective extends AsyncMethodBase {
     method = input(null, { alias: "async-submit" });
     mode = input("click");
@@ -1667,6 +1714,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 args: ["class.loading"]
             }] } });
 
+class DynamicFormTemplateDirective {
+    templates;
+    template;
+    control;
+    label;
+    input;
+    prefix;
+    suffix;
+    setPrefix;
+    setSuffix;
+    setting = null;
+    constructor(templates, template) {
+        this.templates = templates;
+        this.template = template;
+    }
+    ngOnChanges() {
+        this.ngOnDestroy();
+        this.setting = this.selectType();
+        if (!this.setting)
+            return;
+        this.templates.add(...this.setting, this.template);
+    }
+    ngOnDestroy() {
+        if (!this.setting)
+            return;
+        this.templates.remove(...this.setting);
+    }
+    selectType() {
+        const inputs = Object.keys(this);
+        for (const input of inputs) {
+            const value = this[input];
+            if (this.templates.isValidType(input) && ObjectUtils.isStringWithValue(value)) {
+                return [value, input];
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateDirective, deps: [{ token: DynamicFormTemplateService }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormTemplateDirective, isStandalone: false, selector: "ng-template[control],\n                ng-template[label],\n                ng-template[input],\n                ng-template[prefix],\n                ng-template[suffix],\n                ng-template[setPrefix],\n                ng-template[setSuffix]", inputs: { control: "control", label: "label", input: "input", prefix: "prefix", suffix: "suffix", setPrefix: "setPrefix", setSuffix: "setSuffix" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: `ng-template[control],
+                ng-template[label],
+                ng-template[input],
+                ng-template[prefix],
+                ng-template[suffix],
+                ng-template[setPrefix],
+                ng-template[setSuffix]`
+                }]
+        }], ctorParameters: () => [{ type: DynamicFormTemplateService }, { type: i0.TemplateRef }], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], setPrefix: [{
+                type: Input
+            }], setSuffix: [{
+                type: Input
+            }] } });
+
+class DynamicFormTemplatePipe {
+    templates;
+    templatesUpdated;
+    cachedKey;
+    cachedType;
+    cachedTemplate;
+    constructor(templates) {
+        this.templates = templates;
+        this.cachedKey = null;
+        this.cachedType = null;
+        this.cachedTemplate = null;
+    }
+    ngOnInit() {
+        this.templatesUpdated = this.templates.templatesUpdated.subscribe(() => {
+            this.cachedTemplate = null;
+        });
+    }
+    ngOnDestroy() {
+        if (this.templatesUpdated)
+            this.templatesUpdated.unsubscribe();
+    }
+    transform(field, type) {
+        const key = String(field.key || field.id);
+        if (!field || !key)
+            return null;
+        if (this.cachedTemplate === null || this.cachedKey !== key || this.cachedType !== type) {
+            this.cachedKey = key;
+            this.cachedType = type;
+            this.cachedTemplate = this.templates.get(type, key);
+        }
+        return this.cachedTemplate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, deps: [{ token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, isStandalone: false, name: "dynamicFormTemplate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: false,
+                    pure: false,
+                    name: "dynamicFormTemplate"
+                }]
+        }], ctorParameters: () => [{ type: DynamicFormTemplateService }] });
+
 class DynamicFieldType extends FieldType {
     stateChanges = new Subject();
     _errorState = false;
@@ -1847,8 +2006,8 @@ class DynamicFormComponent {
     reset() {
         this.options?.resetModel?.();
     }
-    serialize(validate = true) {
-        return this.forms.serializeForm(this, validate);
+    serialize(validate = true, ...purposes) {
+        return this.forms.serializeForm(this, validate, ...purposes);
     }
     getField(path) {
         const config = untracked(() => this.config());
@@ -1859,11 +2018,11 @@ class DynamicFormComponent {
         return field?.formControl ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onFieldChanges: "onFieldChanges", onValueChanges: "onValueChanges", onInit: "onInit" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onFieldChanges: "onFieldChanges", onValueChanges: "onValueChanges", onInit: "onInit" }, providers: [DynamicFormTemplateService], ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DynamicFormTemplateService], template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: DynamicFormService }] });
 
 class DynamicFormArrayComponent extends FieldArrayType {
@@ -1983,20 +2142,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class DynamicFormFieldComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n<ng-template #inputTemplate>\n    <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || labelTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n    }\n    <div class=\"field-container\">\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                [id]=\"id + '-formly-validation-error'\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n    @if (props.labelAlign === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || labelTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n              [ngTemplateOutletContext]=\"field\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n<ng-template #inputTemplate>\n    <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || labelTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n    }\n    <div class=\"field-container\">\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                [id]=\"id + '-formly-validation-error'\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n    @if (props.labelAlign === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || labelTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n              [ngTemplateOutletContext]=\"field\"></ng-container>\n" }]
         }] });
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'setPrefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'setSuffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'setPrefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'setSuffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n}\n" }]
         }] });
 
 class DynamicFormGroupComponent extends FieldWrapper {
@@ -2026,9 +2185,12 @@ const components = [
 // --- Directives ---
 const directives = [
     AsyncSubmitDirective,
+    DynamicFormTemplateDirective
 ];
 // --- Pipes ---
-const pipes = [];
+const pipes = [
+    DynamicFormTemplatePipe
+];
 
 class NgxDynamicFormModule {
     static getProviders(config) {
@@ -2070,12 +2232,12 @@ class NgxDynamicFormModule {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
-            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
@@ -2129,5 +2291,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
+export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map