@muziehdesign/forms 0.0.1 → 0.0.397-alpha

package/fesm2020/muziehdesign-forms.mjs

@@ -1,130 +1,458 @@
 import * as i0 from '@angular/core';
-import { Injectable, NgModule } from '@angular/core';
-import { object, string, boolean } from 'yup';
+import { Injectable, Component, Input, NgModule } from '@angular/core';
+import * as Yup from 'yup';
+import { object } from 'yup';
 import 'reflect-metadata';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormArray } from '@angular/forms';
+import { BehaviorSubject, switchMap, from } from 'rxjs';
+import { format, parse, isValid } from 'date-fns';
+import * as IMask from 'imask';
 
-class ModelValidator {
-    constructor(modelSchema) {
-        this.schema = modelSchema;
-    }
-    validate(model) {
-        return this.schema
-            .validate(model, { abortEarly: false })
-            .then(() => {
-            return [];
-        })
-            .catch((e) => {
-            return e.inner.map((error) => ({ path: error.path, type: error.type, message: error.message }));
-        });
-    }
+class ModelValidator {
+    constructor(modelSchema) {
+        this.schema = modelSchema;
+    }
+    validate(model) {
+        return this.schema
+            .validate(model, { abortEarly: false })
+            .then(() => {
+            return [];
+        })
+            .catch((e) => {
+            return e.inner.map((error) => ({ path: error.path, type: error.type, message: error.message }));
+        });
+    }
 }
 
-const SCHEMA_METADATA_NAMESPACE = 'custom:muziehdesign:schema';
+const SCHEMA_METADATA_NAMESPACE = 'custom:muziehdesign:annotations';
 
-var PropertyType;
-(function (PropertyType) {
-    PropertyType[PropertyType["string"] = 0] = "string";
-    PropertyType[PropertyType["number"] = 1] = "number";
-    PropertyType[PropertyType["array"] = 2] = "array";
-    PropertyType[PropertyType["boolean"] = 3] = "boolean";
-})(PropertyType || (PropertyType = {}));
+const METADATA_KEY = 'custom:muziehdesign:annotations';
+var ConstraintType;
+(function (ConstraintType) {
+    ConstraintType[ConstraintType["string"] = 0] = "string";
+    ConstraintType[ConstraintType["boolean"] = 1] = "boolean";
+    ConstraintType[ConstraintType["date"] = 2] = "date";
+    ConstraintType[ConstraintType["object"] = 3] = "object";
+    ConstraintType[ConstraintType["number"] = 4] = "number";
+})(ConstraintType || (ConstraintType = {}));
+const registerMetadata = (target, propertyKey, constraint) => {
+    const metadata = Reflect.getMetadata(METADATA_KEY, target) || new Map();
+    metadata.set(propertyKey, constraint);
+    Reflect.defineMetadata(METADATA_KEY, metadata, target);
+};
+function StringType(...annotations) {
+    return function (target, propertyKey) {
+        const o = Object.assign({}, ...annotations);
+        o.constraintType = ConstraintType.string;
+        registerMetadata(target, propertyKey, o);
+    };
+}
+function BooleanType(...annotations) {
+    return function (target, propertyKey) {
+        const o = Object.assign({}, ...annotations);
+        o.constraintType = ConstraintType.boolean;
+        registerMetadata(target, propertyKey, o);
+    };
+}
+function DateType(...annotations) {
+    return function (target, propertyKey) {
+        const o = Object.assign({}, ...annotations);
+        o.constraintType = ConstraintType.date;
+        registerMetadata(target, propertyKey, o);
+    };
+}
+function NumberType(...annotations) {
+    return function (target, propertyKey) {
+        const o = Object.assign({}, ...annotations);
+        o.constraintType = ConstraintType.number;
+        registerMetadata(target, propertyKey, o);
+    };
+}
+function ObjectType(type, ...annotations) {
+    return function (target, propertyKey) {
+        const o = Object.assign({}, ...annotations, { getInstance: () => new type() });
+        o.constraintType = ConstraintType.object;
+        registerMetadata(target, propertyKey, o);
+    };
+}
+function required(message) {
+    return { required: { required: true, message: message } };
+}
+function pattern(regex, message) {
+    return { pattern: { pattern: regex, message: message } };
+}
+function length(length, message) {
+    return { length: { length: length, message: message } };
+}
+function maxLength(maxLength, message) {
+    return { maxLength: { maxLength: maxLength, message: message } };
+}
+function minLength(minLength, message) {
+    return { minLength: { minLength: minLength, message: message } };
+}
+function ofValues(values, message) {
+    return { ofValues: { values: values, message: message } };
+}
+function equals(value, message) {
+    return { equals: { equals: value, message: message } };
+}
+function min(value, message) {
+    return { min: { min: value, message: message } };
+}
+function max(value, message) {
+    return { max: { max: value, message: message } };
+}
+function test(name, test, message) {
+    return { test: { name: name, test: test, message: message } };
+}
 
-class ModelSchemaFactory {
-    constructor() { }
-    build(model) {
-        const metadata = Reflect.getMetadata(SCHEMA_METADATA_NAMESPACE, model);
-        let shape = {};
-        metadata.forEach((element) => {
-            if (element.type == PropertyType.string) {
-                shape[element.name] = this.buildStringSchema(element.options || {});
-            }
-            else if (element.type == PropertyType.boolean) {
-                shape[element.name] = this.buildBooleanSchema(element.options || {});
-            }
-        });
-        const schema = object(shape);
-        return new ModelValidator(schema);
-    }
-    buildStringSchema(options) {
-        let stringSchema = string();
-        if (options.required) {
-            stringSchema = stringSchema.required();
-        }
-        if (options.length) {
-            stringSchema = stringSchema.length(options.length);
-        }
-        if (options.minimum) {
-            stringSchema = stringSchema.min(options.minimum);
-        }
-        if (options.maximum) {
-            stringSchema = stringSchema.max(options.maximum);
-        }
-        return stringSchema;
-    }
-    buildBooleanSchema(options) {
-        let booleanSchema = boolean();
-        if (options.equals) {
-            return booleanSchema.test({
-                name: 'mustBe',
-                test: (value) => value == options.equals
-            });
-        }
-        return booleanSchema;
-    }
-}
-ModelSchemaFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModelSchemaFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+/*
+Schema rules need to be built in the order they need to be evaluated in.
+For example,
+  ```
+    schema.required().max(...).matches(...);
+  ```
+evaluates the 3 rules in this order
+  - required
+  - max
+  - matches
+*/
+class ModelSchemaFactory {
+    constructor() { }
+    build(model) {
+        const schema = this.buildObjectSchema(model);
+        return new ModelValidator(schema);
+    }
+    buildObjectSchema(model) {
+        const metadata = Reflect.getMetadata(SCHEMA_METADATA_NAMESPACE, model);
+        let shape = {};
+        metadata.forEach((value, key) => {
+            if (value.constraintType == ConstraintType.string) {
+                shape[key] = this.buildStringSchema(value);
+            }
+            else if (value.constraintType == ConstraintType.boolean) {
+                shape[key] = this.buildBooleanSchema(value);
+            }
+            else if (value.constraintType == ConstraintType.date) {
+                shape[key] = this.buildDateSchema(value);
+            }
+            else if (value.constraintType == ConstraintType.object) {
+                shape[key] = this.buildNestedObjectSchema(value);
+            }
+            else if (value.constraintType == ConstraintType.number) {
+                shape[key] = this.buildNumberSchema(value);
+            }
+        });
+        return object(shape);
+    }
+    buildStringSchema(options) {
+        let schema = Yup.string();
+        if (options.required) {
+            schema = schema.required(options.required.message);
+        }
+        if (options.length) {
+            schema = schema.length(options.length.length, options.length.message);
+        }
+        if (options.maxLength) {
+            schema = schema.max(options.maxLength.maxLength, options.maxLength.message);
+        }
+        if (options.minLength) {
+            schema = schema.min(options.minLength.minLength, options.minLength.message);
+        }
+        if (options.pattern) {
+            schema = schema.matches(options.pattern.pattern, { message: options.pattern.message, excludeEmptyString: true });
+        }
+        return schema;
+    }
+    buildBooleanSchema(options) {
+        let schema = Yup.boolean();
+        if (options.required) {
+            schema = schema.required(options.required.message);
+        }
+        if (options.equals) {
+            if (options.equals.equals) {
+                schema = schema.isTrue(options.equals.message);
+            }
+            else {
+                schema = schema.isFalse(options.equals.message);
+            }
+        }
+        return schema;
+    }
+    buildDateSchema(options) {
+        let schema = Yup.date();
+        if (options.required) {
+            schema = schema.required(options.required.message);
+        }
+        if (options.min) {
+            schema = schema.min(options.min.min, options.min.message);
+        }
+        if (options.max) {
+            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);
+                }
+            });
+        }
+        return schema;
+    }
+    buildNumberSchema(options) {
+        let schema = Yup.number();
+        if (options.required) {
+            schema = schema.required(options.required.message);
+        }
+        return schema;
+    }
+    buildNestedObjectSchema(options) {
+        let nestedSchema = this.buildObjectSchema(options.getInstance());
+        if (options.required) {
+            nestedSchema = nestedSchema.required();
+        }
+        return nestedSchema;
+    }
+}
+ModelSchemaFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModelSchemaFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ModelSchemaFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return []; } });
 
-function StringSchema(options) {
-    return function (target, propertyKey) {
-        const metadata = Reflect.getMetadata('custom:muziehdesign:schema', target) || [];
-        metadata.push({
-            name: propertyKey,
-            type: PropertyType.string,
-            options: options,
-        });
-        // TODO: define on property
-        Reflect.defineMetadata('custom:muziehdesign:schema', metadata, target);
-    };
-}
-function BooleanSchema(options) {
-    return function (target, propertyKey) {
-        const metadata = Reflect.getMetadata('custom:muziehdesign:schema', target) || [];
-        metadata.push({
-            name: propertyKey,
-            type: PropertyType.boolean,
-            options: options,
-        });
-        // TODO: define on property
-        Reflect.defineMetadata('custom:muziehdesign:schema', metadata, target);
-    };
+class FieldErrorsComponent {
+    get errorMessage() {
+        const errorKeys = Object.keys(this.field?.errors || {});
+        return errorKeys.length > 0 ? this.field?.errors[errorKeys[0]] : '';
+    }
 }
+FieldErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FieldErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FieldErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: FieldErrorsComponent, 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FieldErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-field-errors', template: "<div class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }] } });
 
-class FormsModule {
-}
-FormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: FormsModule });
-FormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: []
-                }]
+class FormsModule {
+}
+FormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, declarations: [FieldErrorsComponent], imports: [CommonModule // TODO: can remove once done with temp error displaying
+    ], exports: [FieldErrorsComponent] });
+FormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, imports: [CommonModule // TODO: can remove once done with temp error displaying
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: FormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [],
+                    declarations: [
+                        FieldErrorsComponent
+                    ],
+                    exports: [
+                        FieldErrorsComponent
+                    ],
+                    imports: [
+                        CommonModule // TODO: can remove once done with temp error displaying
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of forms
+class NgFormModelState {
+    constructor(form, modelValidator, options) {
+        this.form = form;
+        this.modelValidator = modelValidator;
+        this.options = options;
+        this.changesSubject = new BehaviorSubject(undefined);
+        this.changes = this.changesSubject.asObservable();
+        this.form.form.valueChanges
+            .pipe(switchMap(async (x) => {
+            return from(this.validate());
+        }))
+            .subscribe();
+    }
+    getCurrent() {
+        return this.changesSubject.value;
+    }
+    setState(model, errors) {
+        const state = {
+            model: model,
+            errors: errors,
+            valid: errors.length === 0,
+        };
+        this.setStateInternal(state);
+    }
+    setErrors(errors) {
+        //this.errors.next(errors);
+        throw new Error('needs implementation');
+    }
+    appendErrors(errors, skipEmit) {
+        const allErrors = [...(this.changesSubject.value?.errors || []), ...errors];
+        const state = { ...this.changesSubject.value };
+        state.errors = allErrors;
+        this.setStateInternal(state);
+    }
+    async validate() {
+        const model = this.form.value;
+        const state = await this.runValidations(model, this.options?.onValidate);
+        this.setStateInternal(state);
+        return state;
+    }
+    setStateInternal(state) {
+        this.deleteFormErrors();
+        const grouped = state.errors.reduce((grouped, v) => grouped.set(v.path, [...(grouped.get(v.path) || []), v]), new Map());
+        grouped.forEach((value, path) => {
+            let validationErrors = {};
+            value.forEach((v) => (validationErrors[v.type] = v.message));
+            const control = this.form.form.get(path);
+            if (!control) {
+                // TODO: use actual logging service
+            }
+            else {
+                control.setErrors(validationErrors);
+            }
+        });
+        this.changesSubject.next(state);
+    }
+    deleteFormErrors() {
+        this.deleteErrors(this.form.form);
+    }
+    deleteErrors(rootFormGroup) {
+        Object.keys(rootFormGroup.controls).forEach((key) => {
+            const control = rootFormGroup.controls[key];
+            if (!this.isParentControl(control)) {
+                this.deleteErrorsFromControl(key, control);
+            }
+            else if (control instanceof FormGroup) {
+                this.deleteErrors(control);
+            }
+            else if (control instanceof FormArray) {
+                this.loopFormArray(control);
+            }
+        });
+    }
+    deleteErrorsFromControl(key, control) {
+        control.setErrors(null);
+    }
+    isParentControl(control) {
+        return control instanceof FormGroup || control instanceof FormArray;
+    }
+    loopFormArray(formArray) {
+        formArray.controls.forEach((control, index) => {
+            if (!this.isParentControl(control)) {
+                this.deleteErrorsFromControl(index, control);
+            }
+            else if (control instanceof FormGroup) {
+                this.deleteErrors(control);
+            }
+            else if (control instanceof FormArray) {
+                this.loopFormArray(control);
+            }
+        });
+    }
+    async runValidations(model, callback) {
+        const list = await this.modelValidator.validate(model);
+        const final = callback?.(list) || list;
+        return {
+            valid: final.length === 0,
+            errors: final,
+            model: model,
+        };
+    }
+}
+
+class NgFormModelStateFactory {
+    constructor(factory) {
+        this.factory = factory;
+    }
+    create(form, model, options) {
+        const modelState = new NgFormModelState(form, this.factory.build(model), options);
+        return modelState;
+    }
+}
+NgFormModelStateFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: NgFormModelStateFactory, deps: [{ token: ModelSchemaFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+NgFormModelStateFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: NgFormModelStateFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: NgFormModelStateFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ModelSchemaFactory }]; } });
+
+const dateMaskOptions = {
+    mask: 'MM/dd/yyyy',
+    format: (date) => {
+        if (!date) {
+            return '';
+        }
+        return format(date, 'MM/dd/yyyy');
+    },
+    parse: (str) => {
+        const dateRegex = /(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/([12]\d{3})/;
+        if (!str.match(dateRegex)) {
+            return undefined;
+        }
+        const parsed = parse(str, 'MM/dd/yyyy', new Date());
+        if (isValid(parsed)) {
+            return parsed;
+        }
+        return undefined;
+    },
+    blocks: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        MM: {
+            mask: IMask.MaskedRange,
+            from: 1,
+            to: 12,
+        },
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dd: {
+            mask: IMask.MaskedRange,
+            from: 1,
+            to: 31,
+        },
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        yyyy: {
+            mask: IMask.MaskedRange,
+            from: 1000,
+            to: 9999,
+        },
+    },
+};
+const phoneNumberOptions = {
+    mask: '(000) 000-0000',
+};
+const currencyOptions = {
+    mask: Number,
+    scale: 2,
+    thousandsSeparator: ',',
+    padFractionalZeros: true,
+    radix: '.',
+    mapToRadix: ['.'],
+};
+const integerOptions = {
+    mask: Number,
+    scale: 0,
+    thousandsSeparator: ',',
+    padFractionalZeros: true,
+    radix: '.',
+    mapToRadix: ['.'],
+};
+
+/*
+ * Public API Surface of forms
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { BooleanSchema, FormsModule, ModelSchemaFactory, ModelValidator, StringSchema };
+export { BooleanType, ConstraintType, DateType, FieldErrorsComponent, FormsModule, ModelSchemaFactory, ModelValidator, NgFormModelState, NgFormModelStateFactory, NumberType, ObjectType, StringType, currencyOptions, dateMaskOptions, equals, integerOptions, length, max, maxLength, min, minLength, ofValues, pattern, phoneNumberOptions, required, test };
 //# sourceMappingURL=muziehdesign-forms.mjs.map