@stemy/ngx-dynamic-form 19.9.32 → 19.9.34

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

@@ -77,6 +77,12 @@ function FormSelect(data) {
         defineFormControl(target, key, (fb, path, options) => fb.createFormSelect(key, data, path, options));
     };
 }
+function FormDate(data) {
+    data = data || {};
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => fb.createFormDate(key, data, path, options));
+    };
+}
 function FormUpload(data) {
     data = data || {};
     return (target, key) => {
@@ -145,7 +151,7 @@ function controlStatus(control, timeout = 10) {
  * @param value Value to convert to date string
  * @param format Expected date format (date, date-time)
  */
-function convertToDateFormat(value, format) {
+function convertToDateFormat(value, format = "date") {
     if (!ObjectUtils.isDefined(value) || !format?.includes("date"))
         return value;
     value = ObjectUtils.isDate(value) ? value : new Date(value);
@@ -160,7 +166,7 @@ function convertToDateFormat(value, format) {
  * @param value Value to convert to date
  * @param format Expected date format (date, date-time)
  */
-function convertToDate(value, format) {
+function convertToDate(value, format = "date") {
     return (!ObjectUtils.isDefined(value) || !format?.includes("date"))
         ? value
         : new Date(convertToDateFormat(value, format));
@@ -311,7 +317,7 @@ function isFieldHidden(field) {
 const MIN_INPUT_NUM = -1999999999;
 const MAX_INPUT_NUM = 1999999999;
 const EDITOR_TYPES = ["php", "json", "html", "css", "scss"];
-const CUSTOM_INPUT_TYPES = ["checkbox", "textarea", "wysiwyg", "password"];
+const CUSTOM_INPUT_TYPES = ["checkbox", "textarea", "wysiwyg", "date", "password"];
 
 function validationMessage(errorKey) {
     const key = `form.error.${errorKey}`;
@@ -429,6 +435,8 @@ function maxLengthValidation(maxLength) {
 }
 function minValueValidation() {
     return validateEach((v, f) => {
+        if (v == null)
+            return true;
         const type = f.props.type || "number";
         const min = type.includes("date")
             ? convertToDate(f.props.min, type) : Number(f.props.min ?? 0);
@@ -436,11 +444,13 @@ function minValueValidation() {
             const date = new Date(v);
             return isNaN(date) || date >= min;
         }
-        return v == null || v >= min;
+        return v >= min;
     }, "minValue");
 }
 function maxValueValidation() {
     return validateEach((v, f) => {
+        if (v == null)
+            return true;
         const type = f.props.type || "number";
         const max = type.includes("date")
             ? convertToDate(f.props.max, type) : Number(f.props.max ?? 0);
@@ -448,7 +458,7 @@ function maxValueValidation() {
             const date = new Date(v);
             return isNaN(date) || date <= max;
         }
-        return v == null || v <= max;
+        return v <= max;
     }, "maxValue");
 }
 function enumValidation($enum) {
@@ -456,6 +466,11 @@ function enumValidation($enum) {
         return $enum.includes(v);
     }, "enum");
 }
+function equalsValidation(target) {
+    return validateEach(v => {
+        return v === target;
+    }, "equals");
+}
 function setFieldMinDate(field, min, setValue = true) {
     setFieldProp(field, "min", min);
     addFieldValidators(field, [minValueValidation()]);
@@ -817,16 +832,20 @@ class DynamicFormBuilderService {
             style: data.style === "list" ? "list" : "table"
         }, parent, options);
     }
+    createFormDate(key, data, parent, options) {
+        data = data || {};
+        return this.createFormField(key, "date", data, {
+            min: convertToDateFormat(data.min),
+            max: convertToDateFormat(data.max),
+            disabledDays: Array.isArray(data.disabledDays)
+                ? data.disabledDays.map(n => convertToNumber(n)) : [],
+            disabledDates: Array.isArray(data.disabledDates)
+                ? data.disabledDates.map(n => convertToDate(n)) : [],
+            strict: data.strict !== false,
+        }, parent, options);
+    }
     createFormUpload(key, data, parent, options) {
         data = data || {};
-        if (data.asFile) {
-            data.inline = true;
-            console.warn(`File upload property "asFile" is deprecated. Use "inline" instead.`);
-        }
-        if (data.multi) {
-            data.multiple = true;
-            console.warn(`File upload property "multi" is deprecated. Use "multiple" instead.`);
-        }
         const baseUrl = data.url?.startsWith("http") ? data.url : this.api.url(data.url || "assets");
         return this.createFormField(key, "upload", data, {
             inline: data.inline === true,
@@ -835,10 +854,7 @@ class DynamicFormBuilderService {
             url: baseUrl,
             uploadUrl: data.url?.startsWith("http")
                 ? data.uploadUrl
-                : (data.uploadUrl ? this.api.url(data.uploadUrl || "assets") : baseUrl),
-            maxSize: isNaN(data.maxSize) ? MAX_INPUT_NUM : data.maxSize,
-            uploadOptions: data.uploadOptions || {},
-            createUploadData: data.createUploadData
+                : (data.uploadUrl ? this.api.url(data.uploadUrl || "assets") : baseUrl)
         }, parent, options);
     }
     createFormGroup(key, fields, data, parent, options) {
@@ -1203,20 +1219,9 @@ class DynamicFormSchemaService {
         return !field ? [] : options.customize(field, property, schema);
     }
     async getFormFieldForProp(property, options, parent) {
-        // First check property references, because a dynamic schema can be a type of object which we use for editor
-        const refs = await this.openApi.getReferences(property, options.schema);
-        if (refs.length > 0) {
-            return this.getFormGroupConfig(property, options, parent);
-        }
-        // Then check the property type
-        switch (property.type) {
-            case "object":
-                return this.getFormEditorConfig(property, options, parent);
-            case "file":
-            case "upload":
-                return this.getFormUploadConfig(property, options, parent);
-            case "boolean":
-                return this.getFormCheckboxConfig(property, options, parent);
+        if (property.type === "boolean") {
+            // Handle boolean first
+            return this.getFormCheckboxConfig(property, options, parent);
         }
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum) || ObjectUtils.isStringWithValue(property.optionsPath) || ObjectUtils.isStringWithValue(property.endpoint)) {
@@ -1234,17 +1239,23 @@ class DynamicFormSchemaService {
             return this.getFormTextareaConfig(property, options, parent);
         }
         if (property.format == "date" || property.format == "date-time") {
-            return this.getFormDatepickerConfig(property, options, parent);
+            return this.getFormDateConfig(property, options, parent);
         }
+        // First check property references, because a dynamic schema can be a type of object which we use for editor
+        const refs = await this.openApi.getReferences(property, options.schema);
+        if (refs.length > 0) {
+            return this.getFormGroupConfig(property, options, parent);
+        }
+        // Then check if it might be an editor property
         if (this.checkIsEditorProperty(property)) {
             return this.getFormEditorConfig(property, options, parent);
         }
         return this.getFormInputConfig(property, options, parent);
     }
     checkIsEditorProperty(property) {
-        if (!property.format)
-            return false;
-        return EDITOR_TYPES.indexOf(property.format) >= 0 || property.format.endsWith("script");
+        return property.type === "object"
+            || EDITOR_TYPES.indexOf(property.format) >= 0
+            || property.format?.endsWith("script");
     }
     getFormFieldData(property, options) {
         const validators = {};
@@ -1361,13 +1372,16 @@ class DynamicFormSchemaService {
             type: property.format || "json"
         }, parent, options);
     }
-    getFormDatepickerConfig(property, options, parent) {
-        const type = property.format == "date-time" ? "datetime-local" : "date";
-        return this.builder.createFormInput(property.id, {
+    getFormDateConfig(property, options, parent) {
+        // const type = property.format == "date-time" ? "datetime-local" : "date";
+        // TODO: Support date-time also
+        return this.builder.createFormDate(property.id, {
             ...this.getFormFieldData(property, options),
-            type,
-            min: convertToDateFormat(property.minimum ?? property.min, property.format),
-            max: convertToDateFormat(property.maximum ?? property.max, property.format),
+            min: convertToDate(property.minimum ?? property.min, property.format),
+            max: convertToDate(property.maximum ?? property.max, property.format),
+            disabledDays: property.disabledDays,
+            disabledDates: property.disabledDates,
+            strict: property.strict,
         }, parent, options);
     }
     getFormSelectConfig($enum, property, options, parent) {
@@ -1389,8 +1403,7 @@ class DynamicFormSchemaService {
             inline: property.inline,
             accept: property.accept,
             url: property.url,
-            maxSize: property.maxSize,
-            uploadOptions: property.uploadOptions
+            uploadUrl: property.uploadUrl,
         }, parent, options);
     }
     getFormCheckboxConfig(property, options, parent) {
@@ -1527,6 +1540,9 @@ class DynamicFormSchemaService {
         if (Array.isArray(property.enum)) {
             validators.enum = enumValidation(property.enum);
         }
+        if ("equals" in property) {
+            validators.equals = equalsValidation(property.equals);
+        }
         // if (isString(property.pattern) && property.pattern.length) {
         //     validators.pattern = property.pattern;
         // }
@@ -1554,6 +1570,9 @@ class DynamicFormSchemaService {
         if (Array.isArray(items.enum)) {
             validators.enum = enumValidation(items.enum);
         }
+        if ("equals" in items) {
+            validators.equals = equalsValidation(items.equals);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormSchemaService }); }
@@ -2219,6 +2238,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
             args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
         }] });
 
+class DynamicFormDateComponent extends DynamicFieldType {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormDateComponent, isStandalone: false, selector: "dynamic-form-date", usesInheritance: true, ngImport: i0, template: "<date-picker [formControl]=\"formControl\"\n             [min]=\"$any(props.min)\"\n             [max]=\"$any(props.max)\"\n             [disabledDays]=\"props.daysDisabled\"\n             [disabledDates]=\"\"></date-picker>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.DatePickerComponent, selector: "date-picker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormDateComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-date", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<date-picker [formControl]=\"formControl\"\n             [min]=\"$any(props.min)\"\n             [max]=\"$any(props.max)\"\n             [disabledDays]=\"props.daysDisabled\"\n             [disabledDates]=\"\"></date-picker>\n" }]
+        }] });
+
 class DynamicFormEditorComponent extends DynamicFieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormEditorComponent, isStandalone: false, selector: "dynamic-form-editor", usesInheritance: true, ngImport: i0, template: "<code-editor [lang]=\"props.type\"\n             [formControl]=\"formControl\"\n             [formlyAttributes]=\"field\">\n</code-editor>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.CodeEditorComponent, selector: "code-editor", inputs: ["value", "lang", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -2291,11 +2319,11 @@ class DynamicFormTranslationComponent extends DynamicFormArrayComponent {
         this.currentTab.set(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTranslationComponent, deps: [{ token: i2.EventsService }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormTranslationComponent, isStandalone: false, selector: "dynamic-form-translation", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\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    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n\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}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormTranslationComponent, isStandalone: false, selector: "dynamic-form-translation", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\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    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n\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}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTranslationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-translation", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\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    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n\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}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form-translation", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\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    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n\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}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i2.EventsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LANGUAGE_SERVICE]
@@ -2354,11 +2382,11 @@ class DynamicFormGroupComponent extends FieldWrapper {
         return this.field?.parent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\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: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    [id]=\"id + '-formly-validation-error'\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\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: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { 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.22", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    [id]=\"id + '-formly-validation-error'\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
         }] });
 
 // --- Components ---
@@ -2367,6 +2395,7 @@ const components = [
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormDateComponent,
     DynamicFormEditorComponent,
     DynamicFormPasswordComponent,
     DynamicFormStaticComponent,
@@ -2396,6 +2425,7 @@ class NgxDynamicFormModule {
                 types: [
                     { name: "array", component: DynamicFormArrayComponent },
                     { name: "chips", component: DynamicFormChipsComponent },
+                    { name: "date", component: DynamicFormDateComponent },
                     { name: "editor", component: DynamicFormEditorComponent },
                     { name: "password", component: DynamicFormPasswordComponent },
                     { name: "static", component: DynamicFormStaticComponent },
@@ -2437,12 +2467,12 @@ class NgxDynamicFormModule {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormDateComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
-            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormDateComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
@@ -2496,5 +2526,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormEditorComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_TYPES, 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, enumValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
+export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormDateComponent, DynamicFormEditorComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_TYPES, FORM_ROOT_ID, FormArray, FormDate, 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, enumValidation, equalsValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map