@muziehdesign/forms 19.2.979 → 20.0.0-beta.1007

package/fesm2022/muziehdesign-forms.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, forwardRef, Directive, Optional, SkipSelf, ContentChild, HostListener, NgModule } from '@angular/core';
+import { Injectable, LOCALE_ID, Inject, Input, Component, forwardRef, Directive, Optional, SkipSelf, ContentChild, HostListener, NgModule } from '@angular/core';
 import * as Yup from 'yup';
 import { object } from 'yup';
 import 'reflect-metadata';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormGroup, FormArray, NG_VALUE_ACCESSOR, FormsModule as FormsModule$1, NgModel, NgModelGroup, NgForm, ControlContainer } from '@angular/forms';
 import { BehaviorSubject, switchMap, from } from 'rxjs';
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class ModelSchema {
     // TODO: need to keep track of internal and external
     //private definitions?:  {[K in keyof T]: FieldSchema<any>};
-    constructor(metadata, schema) {
+    constructor(metadata, schema, name) {
         this.metadata = metadata;
         this.schema = schema;
+        this.name = name;
     }
     getMetadata(paths) {
         //console.log('fetching metadata for path: ', paths);
@@ -110,9 +110,9 @@ class ModelSchemaFactory {
     constructor() { }
     build(model) {
         const metadata = Reflect.getMetadata(SCHEMA_METADATA_NAMESPACE, model);
-        const schemaData = [...metadata.values()];
+        const schemaData = [...metadata.schemas.values()];
         const schema = this.buildYupSchema(schemaData);
-        return new ModelSchema(schemaData, schema);
+        return new ModelSchema(schemaData, schema, metadata.name);
     }
     buildUntyped(raw) {
         const schema = this.buildYupSchema(raw);
@@ -195,6 +195,12 @@ class ModelSchemaFactory {
         if (original.label) {
             schema.label(original.label);
         }
+        schema = schema.transform(function (value, originalValue) {
+            if (originalValue === '') {
+                return undefined;
+            }
+            return value;
+        });
         const options = original.constraints;
         if (options.required) {
             schema = schema.required(options.required.message);
@@ -206,12 +212,17 @@ class ModelSchemaFactory {
             schema = schema.max(options.max.max, options.max.message);
         }
         if (options.test) {
-            schema = schema.test({
-                name: options.test.name,
-                message: options.test.message,
-                test: (d, context) => {
-                    return options.test.test(d);
-                },
+            schema = schema.test(options.test.name, function (v, context) {
+                if (v && options.test?.test(v) !== true) {
+                    return context.createError({
+                        message: options.test?.message,
+                        path: context.path,
+                        params: {
+                            key: options.test?.name
+                        }
+                    });
+                }
+                return true;
             });
         }
         return schema;
@@ -249,7 +260,7 @@ class ModelSchemaFactory {
     }
     buildNestedObjectSchema(original) {
         const metadata = Reflect.getMetadata(SCHEMA_METADATA_NAMESPACE, original.constraints.getInstance());
-        let nestedSchema = this.buildYupSchema([...metadata.values()]);
+        let nestedSchema = this.buildYupSchema([...metadata.schemas.values()]);
         if (original.label) {
             nestedSchema.label(original.label);
         }
@@ -273,10 +284,10 @@ class ModelSchemaFactory {
         }
         return schema;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModelSchemaFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModelSchemaFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ModelSchemaFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ModelSchemaFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ModelSchemaFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ModelSchemaFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -284,9 +295,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }], ctorParameters: () => [] });
 
 const METADATA_KEY = 'custom:muziehdesign:annotations';
-const registerMetadata = (target, propertyKey, schema) => {
-    const metadata = Reflect.getMetadata(METADATA_KEY, target) || new Map();
-    metadata.set(propertyKey, schema);
+const registerPropertyMetadata = (target, propertyKey, schema) => {
+    const metadata = Reflect.getMetadata(METADATA_KEY, target) || { schemas: new Map() };
+    metadata.schemas.set(propertyKey, schema);
+    Reflect.defineMetadata(METADATA_KEY, metadata, target);
+};
+const registerMetadata = (target, name) => {
+    const metadata = Reflect.getMetadata(METADATA_KEY, target) || { schemas: new Map() };
+    metadata.name = name;
     Reflect.defineMetadata(METADATA_KEY, metadata, target);
 };
 function StringType(...annotations) {
@@ -294,9 +310,9 @@ function StringType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.string,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function BooleanType(...annotations) {
@@ -304,9 +320,9 @@ function BooleanType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.boolean,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function DateType(...annotations) {
@@ -314,9 +330,9 @@ function DateType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.date,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function NumberType(...annotations) {
@@ -324,9 +340,9 @@ function NumberType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.number,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function ObjectType(type, ...annotations) {
@@ -334,9 +350,9 @@ function ObjectType(type, ...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.object,
-            constraints: Object.assign({}, ...annotations, { getInstance: () => new type() })
+            constraints: Object.assign({}, ...annotations, { getInstance: () => new type() }),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function ArrayType(...annotations) {
@@ -344,9 +360,9 @@ function ArrayType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.array,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
     };
 }
 function FileType(...annotations) {
@@ -354,9 +370,17 @@ function FileType(...annotations) {
         const schema = {
             name: propertyKey,
             type: FieldSchemaType.file,
-            constraints: Object.assign({}, ...annotations)
+            constraints: Object.assign({}, ...annotations),
         };
-        registerMetadata(target, propertyKey, schema);
+        registerPropertyMetadata(target, propertyKey, schema);
+    };
+}
+function Model(name) {
+    return function (constructor) {
+        // Class decorators receive the constructor, but property decorators write to constructor.prototype
+        // So we need to write to constructor.prototype to share the same metadata object
+        registerMetadata(constructor.prototype, name);
+        return constructor;
     };
 }
 function required(message) {
@@ -436,9 +460,11 @@ class NgFormModelState {
         grouped.forEach((value, path) => {
             let validationErrors = {};
             value.forEach((v) => (validationErrors[v.type] = v.message));
+            //console.log('setting errors for path:', path, validationErrors);
             const control = this.form.form.get(path);
             if (!control) {
                 // TODO: use actual logging service
+                console.log('control not found for path:', path);
             }
             else {
                 control.setErrors(validationErrors);
@@ -501,27 +527,81 @@ class NgFormModelStateFactory {
         const modelState = new NgFormModelState(form, this.factory.build(model), options);
         return modelState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgFormModelStateFactory, deps: [{ token: ModelSchemaFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgFormModelStateFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgFormModelStateFactory, deps: [{ token: ModelSchemaFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgFormModelStateFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgFormModelStateFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgFormModelStateFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: ModelSchemaFactory }] });
 
+class FormMessageService {
+    constructor(localeId) {
+        this.localeId = localeId;
+        this.localeData = {};
+    }
+    getMessage(messageProps, namespace) {
+        if (typeof messageProps === 'string') {
+            return messageProps;
+        }
+        try {
+            const parts = messageProps.key.split('.');
+            // get namespaced message
+            if (namespace && namespace.length > 0 && messageProps.path && messageProps.path.length > 0) {
+                const namespaced = this.getLocaleData([namespace, messageProps.path, ...parts]);
+                if (namespaced !== undefined) {
+                    return namespaced;
+                }
+            }
+            // get global message
+            const message = this.getLocaleData(parts);
+            if (!message) {
+                return messageProps.key;
+            }
+            return message;
+        }
+        catch {
+            return messageProps.key;
+        }
+    }
+    registerFormMessages(data, localeId) {
+        this.localeData[localeId] = data;
+    }
+    getLocaleData(keyParts) {
+        const messages = this.localeData[this.localeId] || this.localeData['en'];
+        return keyParts.reduce((obj, part) => {
+            if (obj?.[part] === undefined) {
+                return undefined;
+            }
+            return obj[part];
+        }, messages);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormMessageService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormMessageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormMessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
 class FieldErrorsComponent {
     get errorMessage() {
         const errorKeys = Object.keys(this.field?.errors || {});
         return errorKeys.length > 0 ? (this.field?.errors)[errorKeys[0]] : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FieldErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: FieldErrorsComponent, isStandalone: false, selector: "mz-field-errors", inputs: { field: "field" }, ngImport: i0, template: "<div class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FieldErrorsComponent, isStandalone: false, selector: "mz-field-errors", inputs: { field: "field" }, ngImport: i0, template: "@if (errorMessage) {\n  <div class=\"field-error\">{{ errorMessage }}</div>\n  test test\n}\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FieldErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-field-errors', standalone: false, template: "<div class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\n" }]
+            args: [{ selector: 'mz-field-errors', standalone: false, template: "@if (errorMessage) {\n  <div class=\"field-error\">{{ errorMessage }}</div>\n  test test\n}\n" }]
         }], propDecorators: { field: [{
                 type: Input
             }] } });
@@ -618,8 +698,8 @@ class DateValueAccessor {
         newDate.setHours(0, 0, 0);
         return newDate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: DateValueAccessor, isStandalone: true, selector: "[mzDateInput]", host: { listeners: { "input": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: DateValueAccessor, isStandalone: true, selector: "[mzDateInput]", host: { listeners: { "input": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateValueAccessor),
@@ -627,7 +707,7 @@ class DateValueAccessor {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mzDateInput]',
@@ -681,8 +761,8 @@ class MzCheckboxGroup {
         this.onChange(this.selections);
         this.onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzCheckboxGroup, isStandalone: true, selector: "mz-checkbox-group", inputs: { options: "options", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MzCheckboxGroup, isStandalone: true, selector: "mz-checkbox-group", inputs: { options: "options", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MzCheckboxGroup),
@@ -690,7 +770,7 @@ class MzCheckboxGroup {
             },
         ], ngImport: i0, template: "@for(option of options; track $index) {\n    <label class=\"field-option\">\n        <input type=\"checkbox\" class=\"form-checkbox\" [disabled]=\"disabled\" [value]=\"option.value\" [checked]=\"isChecked(option)\" (change)=\"onCheckboxChange($event, option)\" />\n        <span class=\"checkbox-label\">{{option.label}}</span>\n    </label>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzCheckboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzCheckboxGroup, decorators: [{
             type: Component,
             args: [{ selector: 'mz-checkbox-group', imports: [FormsModule$1], providers: [
                         {
@@ -708,50 +788,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }] } });
 
 function getControlContainer(group, form) {
-    console.log('getControlContainer', group, form);
     return group ?? form;
 }
 class MzField {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor(message, form) {
+        this.message = message;
+        this.form = form;
         this.controlType = 'other';
     }
-    ngAfterContentInit() {
-        //this.fieldMetadata = this.form.schema.getMetadata(this.ngModel?.path || []);
-    }
     getErrorMessage() {
         try {
             const list = Object.values(this.ngModel.errors);
-            return list[0];
+            return this.message.getMessage(list[0], this.form?.schema.name);
         }
         catch {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzField, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzField, isStandalone: true, selector: "mz-field", inputs: { label: "label", controlType: "controlType", schema: "schema" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzField, deps: [{ token: FormMessageService }, { token: MzForm, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MzField, isStandalone: true, selector: "mz-field", inputs: { label: "label", controlType: "controlType" }, providers: [
             {
                 provide: ControlContainer,
                 useFactory: getControlContainer,
-                deps: [[new Optional(), new SkipSelf(), NgModelGroup], [new Optional(), new SkipSelf(), NgForm]]
-            }
-        ], queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<label class=\"field\">\n    @if(label && controlType !== 'checkbox') {\n        <span class=\"field-label\">\n            {{ label }} \n        </span>\n    }\n    <ng-content></ng-content>\n\n    @if(controlType === 'checkbox' && label) {\n    <span class=\"checkbox-label\">{{ label }}</span>\n    } \n    @if(ngModel?.touched && ngModel?.invalid) {\n    <div class=\"field-error\">\n        {{ getErrorMessage() }}\n    </div>\n    }\n</label>\n" }); }
+                deps: [
+                    [new Optional(), new SkipSelf(), NgModelGroup],
+                    [new Optional(), new SkipSelf(), NgForm],
+                ],
+            },
+        ], queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<label class=\"field\">\n    @if(label && controlType !== 'checkbox') {\n        <span class=\"field-label\">\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n\n    @if(controlType === 'checkbox' && label) {\n    <span class=\"checkbox-label\">{{ label }}</span>\n    }\n    @if(ngModel?.touched && ngModel?.invalid) {\n    <div class=\"field-error\">\n        {{ getErrorMessage() }}\n    </div>\n    }\n</label>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzField, decorators: [{
             type: Component,
             args: [{ selector: 'mz-field', imports: [], providers: [
                         {
                             provide: ControlContainer,
                             useFactory: getControlContainer,
-                            deps: [[new Optional(), new SkipSelf(), NgModelGroup], [new Optional(), new SkipSelf(), NgForm]]
-                        }
-                    ], template: "<label class=\"field\">\n    @if(label && controlType !== 'checkbox') {\n        <span class=\"field-label\">\n            {{ label }} \n        </span>\n    }\n    <ng-content></ng-content>\n\n    @if(controlType === 'checkbox' && label) {\n    <span class=\"checkbox-label\">{{ label }}</span>\n    } \n    @if(ngModel?.touched && ngModel?.invalid) {\n    <div class=\"field-error\">\n        {{ getErrorMessage() }}\n    </div>\n    }\n</label>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                            deps: [
+                                [new Optional(), new SkipSelf(), NgModelGroup],
+                                [new Optional(), new SkipSelf(), NgForm],
+                            ],
+                        },
+                    ], template: "<label class=\"field\">\n    @if(label && controlType !== 'checkbox') {\n        <span class=\"field-label\">\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n\n    @if(controlType === 'checkbox' && label) {\n    <span class=\"checkbox-label\">{{ label }}</span>\n    }\n    @if(ngModel?.touched && ngModel?.invalid) {\n    <div class=\"field-error\">\n        {{ getErrorMessage() }}\n    </div>\n    }\n</label>\n" }]
+        }], ctorParameters: () => [{ type: FormMessageService }, { type: MzForm, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { label: [{
                 type: Input
             }], controlType: [{
                 type: Input
-            }], schema: [{
-                type: Input
             }], ngModel: [{
                 type: ContentChild,
                 args: [NgModel]
@@ -771,16 +854,16 @@ class MzForm {
             event.stopImmediatePropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzForm, deps: [{ token: i1$1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MzForm, isStandalone: true, selector: "[mzForm]", inputs: { schema: "schema" }, host: { listeners: { "submit": "onSubmit($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzForm, deps: [{ token: i1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: MzForm, isStandalone: true, selector: "[mzForm]", inputs: { schema: "schema" }, host: { listeners: { "submit": "onSubmit($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzForm, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mzForm]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.NgForm }], propDecorators: { schema: [{
+        }], ctorParameters: () => [{ type: i1.NgForm }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], onSubmit: [{
@@ -792,13 +875,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @deprecated
  */
 class FormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: FormsModule, declarations: [FieldErrorsComponent], imports: [CommonModule // TODO: can remove once done with temp error displaying
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: FormsModule, declarations: [FieldErrorsComponent], imports: [CommonModule // TODO: can remove once done with temp error displaying
         ], exports: [FieldErrorsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FormsModule, imports: [CommonModule // TODO: can remove once done with temp error displaying
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormsModule, imports: [CommonModule // TODO: can remove once done with temp error displaying
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormsModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [],
@@ -814,17 +897,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 class MzFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MzFormsModule, imports: [MzField,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: MzFormsModule, imports: [MzField,
             MzForm,
             DateValueAccessor,
             MzCheckboxGroup], exports: [MzField,
             MzForm,
             DateValueAccessor,
             MzCheckboxGroup] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzFormsModule, imports: [MzCheckboxGroup] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzFormsModule, imports: [MzCheckboxGroup] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MzFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [],
@@ -843,6 +926,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+const YUP_DEFAULT_LOCALES = {
+    mixed: {
+        required: 'Required',
+        notType: 'Invalid value',
+    },
+};
+function getMessage(message, key) {
+    if (typeof message === 'string') {
+        return { key: message };
+    }
+    return { ...message, key: message.key ?? key };
+}
+const YUP_LOCALE_KEYS = {
+    mixed: {
+        required: (params) => getMessage(params, 'mixed.required'),
+        notType: (params) => getMessage(params, 'mixed.notType'),
+        oneOf: (params) => getMessage(params, 'mixed.oneOf'),
+        notOneOf: (params) => getMessage(params, 'mixed.notOneOf'),
+        default: (params) => getMessage(params, 'mixed.default'),
+        defined: (params) => getMessage(params, 'mixed.defined'),
+    },
+    string: {
+        min: (params) => getMessage(params, 'string.min'),
+        max: (params) => getMessage(params, 'string.max'),
+        length: (params) => getMessage(params, 'string.length'),
+        matches: (params) => getMessage(params, 'string.matches'),
+        email: (params) => getMessage(params, 'string.email'),
+        url: (params) => getMessage(params, 'string.url'),
+        uuid: (params) => getMessage(params, 'string.uuid'),
+        trim: (params) => getMessage(params, 'string.trim'),
+        lowercase: (params) => getMessage(params, 'string.lowercase'),
+        uppercase: (params) => getMessage(params, 'string.uppercase'),
+    },
+    number: {
+        min: (params) => getMessage(params, 'number.min'),
+        max: (params) => getMessage(params, 'number.max'),
+        lessThan: (params) => getMessage(params, 'number.lessThan'),
+        moreThan: (params) => getMessage(params, 'number.moreThan'),
+        positive: (params) => getMessage(params, 'number.positive'),
+        negative: (params) => getMessage(params, 'number.negative'),
+        integer: (params) => getMessage(params, 'number.integer'),
+    },
+    date: {
+        min: (params) => getMessage(params, 'date.min'),
+        max: (params) => getMessage(params, 'date.max')
+    },
+    object: {
+        noUnknown: (params) => getMessage(params, 'object.noUnknown'),
+    },
+    array: {
+        min: (params) => getMessage(params, 'array.min'),
+        max: (params) => getMessage(params, 'array.max'),
+        length: (params) => getMessage(params, 'array.length'),
+    },
+    boolean: {
+        isValue: (params) => getMessage(params, 'boolean.isValue'),
+    }
+};
+
 /*
  * Public API Surface of forms
  */
@@ -851,5 +993,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayType, BooleanType, DateType, DateValueAccessor, FieldErrorsComponent, FieldSchemaType, FileType, FormsModule, ModelSchema, ModelSchemaFactory, MzCheckboxGroup, MzField, MzForm, MzFormsModule, NgFormModelState, NgFormModelStateFactory, NumberType, ObjectType, StringType, buildArraySchema, buildBooleanSchema, buildDateSchema, buildNumberSchema, buildStringSchema, currencyOptions, equals, integerOptions, length, max, maxLength, min, minLength, ofValues, pattern, phoneNumberOptions, required, ssnOptions, test };
+export { ArrayType, BooleanType, DateType, DateValueAccessor, FieldErrorsComponent, FieldSchemaType, FileType, FormMessageService, FormsModule, Model, ModelSchema, ModelSchemaFactory, MzCheckboxGroup, MzField, MzForm, MzFormsModule, NgFormModelState, NgFormModelStateFactory, NumberType, ObjectType, StringType, YUP_DEFAULT_LOCALES, YUP_LOCALE_KEYS, buildArraySchema, buildBooleanSchema, buildDateSchema, buildNumberSchema, buildStringSchema, currencyOptions, equals, getMessage, integerOptions, length, max, maxLength, min, minLength, ofValues, pattern, phoneNumberOptions, required, ssnOptions, test };
 //# sourceMappingURL=muziehdesign-forms.mjs.map