@tehw0lf/contact-form 0.14.4 → 0.17.5

package/README.md

@@ -1,9 +1,6 @@
 # contact-form
 
 This provides a simple way to let your users contact you.
-The component takes as input an API-URL.
-
-Default is 'https://forwardmethis.com/tehwolf@pm.me' - please change it, as you will need to confirm the API access for the first email you will receive.
 
 ## Installation
 
@@ -13,12 +10,12 @@ The following dependencies are needed:
 
 ```bash
     @angular/animations
-    @angular/cdk
     @angular/common
     @angular/core
-    @angular/flex-layout
     @angular/forms
-    @angular/material
+    @ngx-formly/core
+    @ngx-formly/material
+    @tehw0lf/mvc
 ```
 
 ### Module
@@ -28,37 +25,64 @@ Run `ng add @tehw0lf/contact-form` in the workspace root of your angular applica
 
 ## Usage
 
-The contact form component takes an apiURL and an email as input. By default, this is set to [ForwardMeThis](https://forwardmethis.com) and the email address is blank. You can set the variables on the component tag:
+The contact form component takes an apiCallback returning a boolean Observable as mandatory input. By default, this is set to a dummy function that returns true if the form's value contains a name and false if not. A more verbose error message can be provided by updating sendErrorMessage with the error message dynamically from the callback.
+
+A form can be generated from an arbitrary model. By default, the form contains name, email and message fields.
 
 ```html
-<contact-form
-  [apiURL]="emailBackendURL"
-  [email]="yourEmailAddress"
-></contact-form>
+<contact-form [apiCallback]="apiCallback"></contact-form>
 ```
 
-In your component, set the `emailBackendURL` and `yourEmailAddress` properties. The naming of these variables is arbitrary:
+In your component, set the `apiCallback` property. The naming of these variables is arbitrary:
 
 ```ts
-emailBackendURL; //'https://forwardmethis.com/';
-yourEmailAddress; //'my@mail.com'; //this is optional, if your API URL doesn't require an email address parameter
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+apiCallback = (formValue: any) => {
+  // run logic and send to api, return true on success and false on failure
+  // update sendErrorText input with error text for more verbose error message
+  if (formValue.name) {
+    return of(true);
+  } else {
+    return of(false);
+  }
+};
 ```
 
-This contact form will send a POST request to the API, containing the following data structure:
+On submitting the form, your API callback will be executed. The status will be reflected by a message that can be overridden by setting `sendErrorText` and `sendSuccessfulText`.
+
+## Form Generation
+
+In order to generate the form, a config array can be provided. By default, the config array contains name, email and message fields without default values.
 
-```json
-{
-  "name": "your entered name",
-  "email": "your entered email address",
-  "message": "your entered message"
+```ts
+interface FormConfigEntry {
+  field: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+  required?: boolean;
+  type?: string;
 }
+
+formConfig: FormConfigEntry[] = [
+    { field: 'name', required: true },
+    { field: 'email', required: true },
+    { field: 'message', required: true, type: 'textarea' }
+  ];
 ```
 
-You can of course use your own backend with this data structure, as the API-URL and E-Mail address can be overridden as shown above.
+## Text
+
+The message texts can optionally be specified.
+
+```ts
+sendSuccessfulText; //'E-Mail successfully sent';
+
+sendErrorText; //'Send error';
+```
 
 ## Theming
 
-The styles of form background, button, input and text can be customized with optional input parameters:
+The styles of form background, button and text can be customized with optional input parameters:
 
 ```ts
 buttonStyle; /* {
@@ -74,33 +98,9 @@ formStyle; /* {
     'box-shadow': '0 2px 10px rgba(0, 0, 0, 0.075)'
   }*/
 
-inputStyle; /* {
-    border: 'none',
-    color: '#282b2e',
-    'background-color': '#fff'
-  }*/
-
 textStyle; //{ color: '#cc7832' };
 ```
 
-## Text
-
-You can specify your own texts for the fields and labels, or leave the default English version
-
-```ts
-nameLabel; //'Your Name';
-
-emailAddressLabel; //'Your E-Mail Address';
-
-messageLabel; //'Your Message';
-
-sendText; //'Send';
-
-sendSuccessfulText; //'E-Mail successfully sent';
-
-sendErrorText; //'Send error';
-```
-
 ## Development
 
 ### Serve

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './lib/contact-form/contact-form.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2NvbnRhY3QtZm9ybS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywyQ0FBMkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL2NvbnRhY3QtZm9ybS9jb250YWN0LWZvcm0uY29tcG9uZW50JztcbiJdfQ==

package/esm2022/lib/contact-form/contact-form.component.mjs

@@ -0,0 +1,115 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { AsyncPipe, NgStyle } from '@angular/common';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@ngx-formly/core";
+export class ContactFormComponent {
+    constructor() {
+        this.buttonStyle = {
+            'background-color': '#333333',
+            border: 'none',
+            color: '#cc7832'
+        };
+        this.formStyle = {
+            color: '#437da8',
+            'background-color': 'rgba(34, 34, 34, 0.75)',
+            'backdrop-filter': 'blur(50px)',
+            'box-shadow': '0 2px 10px rgba(0, 0, 0, 0.075)'
+        };
+        this.textStyle = { color: '#cc7832' };
+        this.sendText = 'Send';
+        this.sendSuccessfulText = 'E-Mail successfully sent';
+        this.sendErrorText = 'Send error';
+        this.formConfig = [
+            { field: 'name', required: true },
+            { field: 'email', required: true },
+            { field: 'message', required: true, type: 'textarea' }
+        ];
+        this.form = new FormGroup({});
+        this.fields = [];
+        this.model = {};
+        this.emailSent = new Subject();
+        this.emailSent$ = this.emailSent.asObservable();
+        this.unsubscribe$ = new Subject();
+        this.emailSent.next(null);
+    }
+    ngOnInit() {
+        this.buildConfig();
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    submitFormData(formData) {
+        this.apiCallback(formData)
+            .pipe(tap((success) => this.emailSent.next(success)), takeUntil(this.unsubscribe$))
+            .subscribe();
+    }
+    buildConfig() {
+        this.formConfig.forEach((entry) => {
+            if (entry.value) {
+                this.model[entry.field] = entry.value;
+            }
+            this.fields.push({
+                key: entry.field,
+                type: entry.type ? entry.type : 'input',
+                props: {
+                    label: entry.field.toLocaleUpperCase(),
+                    placeholder: 'Enter ' + entry.field,
+                    required: true,
+                    attributes: { style: this.flattenStyle(this.textStyle) }
+                },
+                templateOptions: entry.type === 'textarea'
+                    ? {
+                        autosize: true,
+                        minRows: 5,
+                        maxRows: 10
+                    }
+                    : {}
+            });
+        });
+    }
+    flattenStyle(styleObject) {
+        return Object.entries(styleObject)
+            .flatMap((entry) => {
+            return `${entry[0]}: ${entry[1]};`;
+        })
+            .join('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContactFormComponent, isStandalone: true, selector: "contact-form", inputs: { buttonStyle: "buttonStyle", formStyle: "formStyle", textStyle: "textStyle", sendText: "sendText", sendSuccessfulText: "sendSuccessfulText", sendErrorText: "sendErrorText", formConfig: "formConfig", apiCallback: "apiCallback" }, ngImport: i0, template: "<form\n  [ngStyle]=\"formStyle\"\n  class=\"contact-form flex-column flex-fxflex\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submitFormData(model)\"\n>\n  <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n  <button\n    [ngStyle]=\"buttonStyle\"\n    class=\"form-button\"\n    type=\"submit\"\n    [disabled]=\"!form.valid\"\n  >\n    {{ sendText }}\n  </button>\n  <div [ngStyle]=\"textStyle\" class=\"form-status\">\n    @if ((emailSent$ | async) === true) {\n      {{ sendSuccessfulText }}\n    } @else if ((emailSent$ | async) === false) {\n      {{ sendErrorText }}\n    }\n  </div>\n</form>\n", styles: [".contact-form{max-width:500px;margin:auto;padding:40px 40px 30px;box-sizing:border-box}.form-button{margin-top:.33rem;display:block;border-radius:.25rem;height:36px;width:100%;padding:.375rem .75rem}.form-status{height:19px;margin-top:1rem}.flex-align-start{justify-content:flex-start}.flex-align-stretch{align-content:stretch;align-items:stretch}.flex-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-row{display:flex;flex-direction:row;box-sizing:border-box}.flex-row-wrap{display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}.flex-fxflex-responsive{flex:0 1 calc(33.3% - 32px)}.flex-fxflex-lt-md{flex:0 1 calc(50% - 32px)}.flex-fxflex-lt-sm{flex:100%}.flex-fxflex-fill{height:100%;min-height:100%;min-width:100%;width:100%}.flex-gap-5{margin-right:5px}.flex-gap-12{margin-right:12px}.flex-gap-20{margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: LayoutModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormlyMaterialModule }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'contact-form', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        LayoutModule,
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        FormlyMaterialModule,
+                        NgStyle,
+                        AsyncPipe
+                    ], template: "<form\n  [ngStyle]=\"formStyle\"\n  class=\"contact-form flex-column flex-fxflex\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submitFormData(model)\"\n>\n  <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n  <button\n    [ngStyle]=\"buttonStyle\"\n    class=\"form-button\"\n    type=\"submit\"\n    [disabled]=\"!form.valid\"\n  >\n    {{ sendText }}\n  </button>\n  <div [ngStyle]=\"textStyle\" class=\"form-status\">\n    @if ((emailSent$ | async) === true) {\n      {{ sendSuccessfulText }}\n    } @else if ((emailSent$ | async) === false) {\n      {{ sendErrorText }}\n    }\n  </div>\n</form>\n", styles: [".contact-form{max-width:500px;margin:auto;padding:40px 40px 30px;box-sizing:border-box}.form-button{margin-top:.33rem;display:block;border-radius:.25rem;height:36px;width:100%;padding:.375rem .75rem}.form-status{height:19px;margin-top:1rem}.flex-align-start{justify-content:flex-start}.flex-align-stretch{align-content:stretch;align-items:stretch}.flex-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-row{display:flex;flex-direction:row;box-sizing:border-box}.flex-row-wrap{display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}.flex-fxflex-responsive{flex:0 1 calc(33.3% - 32px)}.flex-fxflex-lt-md{flex:0 1 calc(50% - 32px)}.flex-fxflex-lt-sm{flex:100%}.flex-fxflex-fill{height:100%;min-height:100%;min-width:100%;width:100%}.flex-gap-5{margin-right:5px}.flex-gap-12{margin-right:12px}.flex-gap-20{margin-right:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { buttonStyle: [{
+                type: Input
+            }], formStyle: [{
+                type: Input
+            }], textStyle: [{
+                type: Input
+            }], sendText: [{
+                type: Input
+            }], sendSuccessfulText: [{
+                type: Input
+            }], sendErrorText: [{
+                type: Input
+            }], formConfig: [{
+                type: Input
+            }], apiCallback: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFjdC1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29udGFjdC1mb3JtL3NyYy9saWIvY29udGFjdC1mb3JtL2NvbnRhY3QtZm9ybS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbnRhY3QtZm9ybS9zcmMvbGliL2NvbnRhY3QtZm9ybS9jb250YWN0LWZvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDckQsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBR0wsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNoRSxPQUFPLEVBQXFCLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ25FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzVELE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQTBCaEQsTUFBTSxPQUFPLG9CQUFvQjtJQXdDL0I7UUF2Q1MsZ0JBQVcsR0FBRztZQUNyQixrQkFBa0IsRUFBRSxTQUFTO1lBQzdCLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLFNBQVM7U0FDakIsQ0FBQztRQUVPLGNBQVMsR0FBRztZQUNuQixLQUFLLEVBQUUsU0FBUztZQUNoQixrQkFBa0IsRUFBRSx3QkFBd0I7WUFDNUMsaUJBQWlCLEVBQUUsWUFBWTtZQUMvQixZQUFZLEVBQUUsaUNBQWlDO1NBQ2hELENBQUM7UUFFTyxjQUFTLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLENBQUM7UUFFakMsYUFBUSxHQUFHLE1BQU0sQ0FBQztRQUVsQix1QkFBa0IsR0FBRywwQkFBMEIsQ0FBQztRQUVoRCxrQkFBYSxHQUFHLFlBQVksQ0FBQztRQUU3QixlQUFVLEdBQXNCO1lBQ3ZDLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO1lBQ2pDLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO1lBQ2xDLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7U0FDdkQsQ0FBQztRQUtGLFNBQUksR0FBRyxJQUFJLFNBQVMsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN6QixXQUFNLEdBQXdCLEVBQUUsQ0FBQztRQUNqQyxVQUFLLEdBQThCLEVBQUUsQ0FBQztRQUV0QyxjQUFTLEdBQTRCLElBQUksT0FBTyxFQUFFLENBQUM7UUFDbkQsZUFBVSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFbkMsaUJBQVksR0FBa0IsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUdsRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBRUQsY0FBYyxDQUFDLFFBQW1DO1FBQ2hELElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDO2FBQ3ZCLElBQUksQ0FDSCxHQUFHLENBQUMsQ0FBQyxPQUFnQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUN2RCxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUM3QjthQUNBLFNBQVMsRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFTyxXQUFXO1FBQ2pCLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBc0IsRUFBRSxFQUFFO1lBQ2pELElBQUksS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO2dCQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQ3hDLENBQUM7WUFFRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztnQkFDZixHQUFHLEVBQUUsS0FBSyxDQUFDLEtBQUs7Z0JBQ2hCLElBQUksRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxPQUFPO2dCQUN2QyxLQUFLLEVBQUU7b0JBQ0wsS0FBSyxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsaUJBQWlCLEVBQUU7b0JBQ3RDLFdBQVcsRUFBRSxRQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUs7b0JBQ25DLFFBQVEsRUFBRSxJQUFJO29CQUNkLFVBQVUsRUFBRSxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRTtpQkFDekQ7Z0JBQ0QsZUFBZSxFQUNiLEtBQUssQ0FBQyxJQUFJLEtBQUssVUFBVTtvQkFDdkIsQ0FBQyxDQUFDO3dCQUNFLFFBQVEsRUFBRSxJQUFJO3dCQUNkLE9BQU8sRUFBRSxDQUFDO3dCQUNWLE9BQU8sRUFBRSxFQUFFO3FCQUNaO29CQUNILENBQUMsQ0FBQyxFQUFFO2FBQ1QsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sWUFBWSxDQUFDLFdBQXNDO1FBQ3pELE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUM7YUFDL0IsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDakIsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztRQUNyQyxDQUFDLENBQUM7YUFDRCxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDZCxDQUFDOzhHQS9GVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixzVEN2Q2pDLHduQkF1QkEsMDZCRFFJLFlBQVksOEJBQ1osbUJBQW1CLG9iQUNuQixZQUFZLDZLQUNaLG9CQUFvQiwrQkFDcEIsT0FBTyxzRUFDUCxTQUFTOzsyRkFHQSxvQkFBb0I7a0JBaEJoQyxTQUFTOytCQUVFLGNBQWMsaUJBRVQsaUJBQWlCLENBQUMsSUFBSSxjQUV6QixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLFlBQVk7d0JBQ1osb0JBQW9CO3dCQUNwQixPQUFPO3dCQUNQLFNBQVM7cUJBQ1Y7d0RBR1EsV0FBVztzQkFBbkIsS0FBSztnQkFNRyxTQUFTO3NCQUFqQixLQUFLO2dCQU9HLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBRUcsYUFBYTtzQkFBckIsS0FBSztnQkFFRyxVQUFVO3NCQUFsQixLQUFLO2dCQU9HLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBMYXlvdXRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvbGF5b3V0JztcbmltcG9ydCB7IEFzeW5jUGlwZSwgTmdTdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBGb3JtbHlGaWVsZENvbmZpZywgRm9ybWx5TW9kdWxlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBGb3JtbHlNYXRlcmlhbE1vZHVsZSB9IGZyb20gJ0BuZ3gtZm9ybWx5L21hdGVyaWFsJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCwgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbnRlcmZhY2UgRm9ybUNvbmZpZ0VudHJ5IHtcbiAgZmllbGQ6IHN0cmluZztcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgdmFsdWU/OiBhbnk7XG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgdHlwZT86IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnY29udGFjdC1mb3JtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbnRhY3QtZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0eWxlVXJsczogWycuL2NvbnRhY3QtZm9ybS5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTGF5b3V0TW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgRm9ybWx5TW9kdWxlLFxuICAgIEZvcm1seU1hdGVyaWFsTW9kdWxlLFxuICAgIE5nU3R5bGUsXG4gICAgQXN5bmNQaXBlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ29udGFjdEZvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIGJ1dHRvblN0eWxlID0ge1xuICAgICdiYWNrZ3JvdW5kLWNvbG9yJzogJyMzMzMzMzMnLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGNvbG9yOiAnI2NjNzgzMidcbiAgfTtcblxuICBASW5wdXQoKSBmb3JtU3R5bGUgPSB7XG4gICAgY29sb3I6ICcjNDM3ZGE4JyxcbiAgICAnYmFja2dyb3VuZC1jb2xvcic6ICdyZ2JhKDM0LCAzNCwgMzQsIDAuNzUpJyxcbiAgICAnYmFja2Ryb3AtZmlsdGVyJzogJ2JsdXIoNTBweCknLFxuICAgICdib3gtc2hhZG93JzogJzAgMnB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjA3NSknXG4gIH07XG5cbiAgQElucHV0KCkgdGV4dFN0eWxlID0geyBjb2xvcjogJyNjYzc4MzInIH07XG5cbiAgQElucHV0KCkgc2VuZFRleHQgPSAnU2VuZCc7XG5cbiAgQElucHV0KCkgc2VuZFN1Y2Nlc3NmdWxUZXh0ID0gJ0UtTWFpbCBzdWNjZXNzZnVsbHkgc2VudCc7XG5cbiAgQElucHV0KCkgc2VuZEVycm9yVGV4dCA9ICdTZW5kIGVycm9yJztcblxuICBASW5wdXQoKSBmb3JtQ29uZmlnOiBGb3JtQ29uZmlnRW50cnlbXSA9IFtcbiAgICB7IGZpZWxkOiAnbmFtZScsIHJlcXVpcmVkOiB0cnVlIH0sXG4gICAgeyBmaWVsZDogJ2VtYWlsJywgcmVxdWlyZWQ6IHRydWUgfSxcbiAgICB7IGZpZWxkOiAnbWVzc2FnZScsIHJlcXVpcmVkOiB0cnVlLCB0eXBlOiAndGV4dGFyZWEnIH1cbiAgXTtcblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBASW5wdXQoKSBhcGlDYWxsYmFjayE6IChmb3JtVmFsdWU6IGFueSkgPT4gT2JzZXJ2YWJsZTxib29sZWFuPjtcblxuICBmb3JtID0gbmV3IEZvcm1Hcm91cCh7fSk7XG4gIGZpZWxkczogRm9ybWx5RmllbGRDb25maWdbXSA9IFtdO1xuICBtb2RlbDogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xuXG4gIGVtYWlsU2VudDogU3ViamVjdDxib29sZWFuIHwgbnVsbD4gPSBuZXcgU3ViamVjdCgpO1xuICBlbWFpbFNlbnQkID0gdGhpcy5lbWFpbFNlbnQuYXNPYnNlcnZhYmxlKCk7XG5cbiAgcHJpdmF0ZSB1bnN1YnNjcmliZSQ6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdCgpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuZW1haWxTZW50Lm5leHQobnVsbCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmJ1aWxkQ29uZmlnKCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnVuc3Vic2NyaWJlJC5uZXh0KCk7XG4gICAgdGhpcy51bnN1YnNjcmliZSQuY29tcGxldGUoKTtcbiAgfVxuXG4gIHN1Ym1pdEZvcm1EYXRhKGZvcm1EYXRhOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9KSB7XG4gICAgdGhpcy5hcGlDYWxsYmFjayhmb3JtRGF0YSlcbiAgICAgIC5waXBlKFxuICAgICAgICB0YXAoKHN1Y2Nlc3M6IGJvb2xlYW4pID0+IHRoaXMuZW1haWxTZW50Lm5leHQoc3VjY2VzcykpLFxuICAgICAgICB0YWtlVW50aWwodGhpcy51bnN1YnNjcmliZSQpXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwcml2YXRlIGJ1aWxkQ29uZmlnKCk6IHZvaWQge1xuICAgIHRoaXMuZm9ybUNvbmZpZy5mb3JFYWNoKChlbnRyeTogRm9ybUNvbmZpZ0VudHJ5KSA9PiB7XG4gICAgICBpZiAoZW50cnkudmFsdWUpIHtcbiAgICAgICAgdGhpcy5tb2RlbFtlbnRyeS5maWVsZF0gPSBlbnRyeS52YWx1ZTtcbiAgICAgIH1cblxuICAgICAgdGhpcy5maWVsZHMucHVzaCh7XG4gICAgICAgIGtleTogZW50cnkuZmllbGQsXG4gICAgICAgIHR5cGU6IGVudHJ5LnR5cGUgPyBlbnRyeS50eXBlIDogJ2lucHV0JyxcbiAgICAgICAgcHJvcHM6IHtcbiAgICAgICAgICBsYWJlbDogZW50cnkuZmllbGQudG9Mb2NhbGVVcHBlckNhc2UoKSxcbiAgICAgICAgICBwbGFjZWhvbGRlcjogJ0VudGVyICcgKyBlbnRyeS5maWVsZCxcbiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICAgICAgICBhdHRyaWJ1dGVzOiB7IHN0eWxlOiB0aGlzLmZsYXR0ZW5TdHlsZSh0aGlzLnRleHRTdHlsZSkgfVxuICAgICAgICB9LFxuICAgICAgICB0ZW1wbGF0ZU9wdGlvbnM6XG4gICAgICAgICAgZW50cnkudHlwZSA9PT0gJ3RleHRhcmVhJ1xuICAgICAgICAgICAgPyB7XG4gICAgICAgICAgICAgICAgYXV0b3NpemU6IHRydWUsXG4gICAgICAgICAgICAgICAgbWluUm93czogNSxcbiAgICAgICAgICAgICAgICBtYXhSb3dzOiAxMFxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA6IHt9XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZmxhdHRlblN0eWxlKHN0eWxlT2JqZWN0OiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9KTogc3RyaW5nIHtcbiAgICByZXR1cm4gT2JqZWN0LmVudHJpZXMoc3R5bGVPYmplY3QpXG4gICAgICAuZmxhdE1hcCgoZW50cnkpID0+IHtcbiAgICAgICAgcmV0dXJuIGAke2VudHJ5WzBdfTogJHtlbnRyeVsxXX07YDtcbiAgICAgIH0pXG4gICAgICAuam9pbignJyk7XG4gIH1cbn1cbiIsIjxmb3JtXG4gIFtuZ1N0eWxlXT1cImZvcm1TdHlsZVwiXG4gIGNsYXNzPVwiY29udGFjdC1mb3JtIGZsZXgtY29sdW1uIGZsZXgtZnhmbGV4XCJcbiAgW2Zvcm1Hcm91cF09XCJmb3JtXCJcbiAgKG5nU3VibWl0KT1cInN1Ym1pdEZvcm1EYXRhKG1vZGVsKVwiXG4+XG4gIDxmb3JtbHktZm9ybSBbZm9ybV09XCJmb3JtXCIgW2ZpZWxkc109XCJmaWVsZHNcIiBbbW9kZWxdPVwibW9kZWxcIj48L2Zvcm1seS1mb3JtPlxuICA8YnV0dG9uXG4gICAgW25nU3R5bGVdPVwiYnV0dG9uU3R5bGVcIlxuICAgIGNsYXNzPVwiZm9ybS1idXR0b25cIlxuICAgIHR5cGU9XCJzdWJtaXRcIlxuICAgIFtkaXNhYmxlZF09XCIhZm9ybS52YWxpZFwiXG4gID5cbiAgICB7eyBzZW5kVGV4dCB9fVxuICA8L2J1dHRvbj5cbiAgPGRpdiBbbmdTdHlsZV09XCJ0ZXh0U3R5bGVcIiBjbGFzcz1cImZvcm0tc3RhdHVzXCI+XG4gICAgQGlmICgoZW1haWxTZW50JCB8IGFzeW5jKSA9PT0gdHJ1ZSkge1xuICAgICAge3sgc2VuZFN1Y2Nlc3NmdWxUZXh0IH19XG4gICAgfSBAZWxzZSBpZiAoKGVtYWlsU2VudCQgfCBhc3luYykgPT09IGZhbHNlKSB7XG4gICAgICB7eyBzZW5kRXJyb3JUZXh0IH19XG4gICAgfVxuICA8L2Rpdj5cbjwvZm9ybT5cbiJdfQ==

package/fesm2022/tehw0lf-contact-form.mjs

@@ -0,0 +1,122 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { NgStyle, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { Subject } from 'rxjs';
+import { tap, takeUntil } from 'rxjs/operators';
+
+class ContactFormComponent {
+    constructor() {
+        this.buttonStyle = {
+            'background-color': '#333333',
+            border: 'none',
+            color: '#cc7832'
+        };
+        this.formStyle = {
+            color: '#437da8',
+            'background-color': 'rgba(34, 34, 34, 0.75)',
+            'backdrop-filter': 'blur(50px)',
+            'box-shadow': '0 2px 10px rgba(0, 0, 0, 0.075)'
+        };
+        this.textStyle = { color: '#cc7832' };
+        this.sendText = 'Send';
+        this.sendSuccessfulText = 'E-Mail successfully sent';
+        this.sendErrorText = 'Send error';
+        this.formConfig = [
+            { field: 'name', required: true },
+            { field: 'email', required: true },
+            { field: 'message', required: true, type: 'textarea' }
+        ];
+        this.form = new FormGroup({});
+        this.fields = [];
+        this.model = {};
+        this.emailSent = new Subject();
+        this.emailSent$ = this.emailSent.asObservable();
+        this.unsubscribe$ = new Subject();
+        this.emailSent.next(null);
+    }
+    ngOnInit() {
+        this.buildConfig();
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    submitFormData(formData) {
+        this.apiCallback(formData)
+            .pipe(tap((success) => this.emailSent.next(success)), takeUntil(this.unsubscribe$))
+            .subscribe();
+    }
+    buildConfig() {
+        this.formConfig.forEach((entry) => {
+            if (entry.value) {
+                this.model[entry.field] = entry.value;
+            }
+            this.fields.push({
+                key: entry.field,
+                type: entry.type ? entry.type : 'input',
+                props: {
+                    label: entry.field.toLocaleUpperCase(),
+                    placeholder: 'Enter ' + entry.field,
+                    required: true,
+                    attributes: { style: this.flattenStyle(this.textStyle) }
+                },
+                templateOptions: entry.type === 'textarea'
+                    ? {
+                        autosize: true,
+                        minRows: 5,
+                        maxRows: 10
+                    }
+                    : {}
+            });
+        });
+    }
+    flattenStyle(styleObject) {
+        return Object.entries(styleObject)
+            .flatMap((entry) => {
+            return `${entry[0]}: ${entry[1]};`;
+        })
+            .join('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContactFormComponent, isStandalone: true, selector: "contact-form", inputs: { buttonStyle: "buttonStyle", formStyle: "formStyle", textStyle: "textStyle", sendText: "sendText", sendSuccessfulText: "sendSuccessfulText", sendErrorText: "sendErrorText", formConfig: "formConfig", apiCallback: "apiCallback" }, ngImport: i0, template: "<form\n  [ngStyle]=\"formStyle\"\n  class=\"contact-form flex-column flex-fxflex\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submitFormData(model)\"\n>\n  <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n  <button\n    [ngStyle]=\"buttonStyle\"\n    class=\"form-button\"\n    type=\"submit\"\n    [disabled]=\"!form.valid\"\n  >\n    {{ sendText }}\n  </button>\n  <div [ngStyle]=\"textStyle\" class=\"form-status\">\n    @if ((emailSent$ | async) === true) {\n      {{ sendSuccessfulText }}\n    } @else if ((emailSent$ | async) === false) {\n      {{ sendErrorText }}\n    }\n  </div>\n</form>\n", styles: [".contact-form{max-width:500px;margin:auto;padding:40px 40px 30px;box-sizing:border-box}.form-button{margin-top:.33rem;display:block;border-radius:.25rem;height:36px;width:100%;padding:.375rem .75rem}.form-status{height:19px;margin-top:1rem}.flex-align-start{justify-content:flex-start}.flex-align-stretch{align-content:stretch;align-items:stretch}.flex-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-row{display:flex;flex-direction:row;box-sizing:border-box}.flex-row-wrap{display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}.flex-fxflex-responsive{flex:0 1 calc(33.3% - 32px)}.flex-fxflex-lt-md{flex:0 1 calc(50% - 32px)}.flex-fxflex-lt-sm{flex:100%}.flex-fxflex-fill{height:100%;min-height:100%;min-width:100%;width:100%}.flex-gap-5{margin-right:5px}.flex-gap-12{margin-right:12px}.flex-gap-20{margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: LayoutModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormlyMaterialModule }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'contact-form', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        LayoutModule,
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        FormlyMaterialModule,
+                        NgStyle,
+                        AsyncPipe
+                    ], template: "<form\n  [ngStyle]=\"formStyle\"\n  class=\"contact-form flex-column flex-fxflex\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submitFormData(model)\"\n>\n  <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n  <button\n    [ngStyle]=\"buttonStyle\"\n    class=\"form-button\"\n    type=\"submit\"\n    [disabled]=\"!form.valid\"\n  >\n    {{ sendText }}\n  </button>\n  <div [ngStyle]=\"textStyle\" class=\"form-status\">\n    @if ((emailSent$ | async) === true) {\n      {{ sendSuccessfulText }}\n    } @else if ((emailSent$ | async) === false) {\n      {{ sendErrorText }}\n    }\n  </div>\n</form>\n", styles: [".contact-form{max-width:500px;margin:auto;padding:40px 40px 30px;box-sizing:border-box}.form-button{margin-top:.33rem;display:block;border-radius:.25rem;height:36px;width:100%;padding:.375rem .75rem}.form-status{height:19px;margin-top:1rem}.flex-align-start{justify-content:flex-start}.flex-align-stretch{align-content:stretch;align-items:stretch}.flex-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-row{display:flex;flex-direction:row;box-sizing:border-box}.flex-row-wrap{display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}.flex-fxflex-responsive{flex:0 1 calc(33.3% - 32px)}.flex-fxflex-lt-md{flex:0 1 calc(50% - 32px)}.flex-fxflex-lt-sm{flex:100%}.flex-fxflex-fill{height:100%;min-height:100%;min-width:100%;width:100%}.flex-gap-5{margin-right:5px}.flex-gap-12{margin-right:12px}.flex-gap-20{margin-right:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { buttonStyle: [{
+                type: Input
+            }], formStyle: [{
+                type: Input
+            }], textStyle: [{
+                type: Input
+            }], sendText: [{
+                type: Input
+            }], sendSuccessfulText: [{
+                type: Input
+            }], sendErrorText: [{
+                type: Input
+            }], formConfig: [{
+                type: Input
+            }], apiCallback: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContactFormComponent };
+//# sourceMappingURL=tehw0lf-contact-form.mjs.map

package/fesm2022/tehw0lf-contact-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tehw0lf-contact-form.mjs","sources":["../../../../libs/contact-form/src/lib/contact-form/contact-form.component.ts","../../../../libs/contact-form/src/lib/contact-form/contact-form.component.html","../../../../libs/contact-form/src/tehw0lf-contact-form.ts"],"sourcesContent":["import { LayoutModule } from '@angular/cdk/layout';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport {\n  Component,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation\n} from '@angular/core';\nimport { FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';\nimport { FormlyMaterialModule } from '@ngx-formly/material';\nimport { Observable, Subject } from 'rxjs';\nimport { takeUntil, tap } from 'rxjs/operators';\n\ninterface FormConfigEntry {\n  field: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value?: any;\n  required?: boolean;\n  type?: string;\n}\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'contact-form',\n  templateUrl: './contact-form.component.html',\n  encapsulation: ViewEncapsulation.None,\n  styleUrls: ['./contact-form.component.scss'],\n  standalone: true,\n  imports: [\n    LayoutModule,\n    ReactiveFormsModule,\n    FormlyModule,\n    FormlyMaterialModule,\n    NgStyle,\n    AsyncPipe\n  ]\n})\nexport class ContactFormComponent implements OnInit, OnDestroy {\n  @Input() buttonStyle = {\n    'background-color': '#333333',\n    border: 'none',\n    color: '#cc7832'\n  };\n\n  @Input() formStyle = {\n    color: '#437da8',\n    'background-color': 'rgba(34, 34, 34, 0.75)',\n    'backdrop-filter': 'blur(50px)',\n    'box-shadow': '0 2px 10px rgba(0, 0, 0, 0.075)'\n  };\n\n  @Input() textStyle = { color: '#cc7832' };\n\n  @Input() sendText = 'Send';\n\n  @Input() sendSuccessfulText = 'E-Mail successfully sent';\n\n  @Input() sendErrorText = 'Send error';\n\n  @Input() formConfig: FormConfigEntry[] = [\n    { field: 'name', required: true },\n    { field: 'email', required: true },\n    { field: 'message', required: true, type: 'textarea' }\n  ];\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Input() apiCallback!: (formValue: any) => Observable<boolean>;\n\n  form = new FormGroup({});\n  fields: FormlyFieldConfig[] = [];\n  model: { [key: string]: string } = {};\n\n  emailSent: Subject<boolean | null> = new Subject();\n  emailSent$ = this.emailSent.asObservable();\n\n  private unsubscribe$: Subject<void> = new Subject();\n\n  constructor() {\n    this.emailSent.next(null);\n  }\n\n  ngOnInit(): void {\n    this.buildConfig();\n  }\n\n  ngOnDestroy(): void {\n    this.unsubscribe$.next();\n    this.unsubscribe$.complete();\n  }\n\n  submitFormData(formData: { [key: string]: string }) {\n    this.apiCallback(formData)\n      .pipe(\n        tap((success: boolean) => this.emailSent.next(success)),\n        takeUntil(this.unsubscribe$)\n      )\n      .subscribe();\n  }\n\n  private buildConfig(): void {\n    this.formConfig.forEach((entry: FormConfigEntry) => {\n      if (entry.value) {\n        this.model[entry.field] = entry.value;\n      }\n\n      this.fields.push({\n        key: entry.field,\n        type: entry.type ? entry.type : 'input',\n        props: {\n          label: entry.field.toLocaleUpperCase(),\n          placeholder: 'Enter ' + entry.field,\n          required: true,\n          attributes: { style: this.flattenStyle(this.textStyle) }\n        },\n        templateOptions:\n          entry.type === 'textarea'\n            ? {\n                autosize: true,\n                minRows: 5,\n                maxRows: 10\n              }\n            : {}\n      });\n    });\n  }\n\n  private flattenStyle(styleObject: { [key: string]: string }): string {\n    return Object.entries(styleObject)\n      .flatMap((entry) => {\n        return `${entry[0]}: ${entry[1]};`;\n      })\n      .join('');\n  }\n}\n","<form\n  [ngStyle]=\"formStyle\"\n  class=\"contact-form flex-column flex-fxflex\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submitFormData(model)\"\n>\n  <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n  <button\n    [ngStyle]=\"buttonStyle\"\n    class=\"form-button\"\n    type=\"submit\"\n    [disabled]=\"!form.valid\"\n  >\n    {{ sendText }}\n  </button>\n  <div [ngStyle]=\"textStyle\" class=\"form-status\">\n    @if ((emailSent$ | async) === true) {\n      {{ sendSuccessfulText }}\n    } @else if ((emailSent$ | async) === false) {\n      {{ sendErrorText }}\n    }\n  </div>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,2 +1 @@
-export * from './lib/contact-form.module';
 export * from './lib/contact-form/contact-form.component';

package/lib/contact-form/contact-form.component.d.ts

@@ -1,11 +1,15 @@
-import { OnDestroy } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { EmailApiService } from '../email-api.service';
+import { OnDestroy, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class ContactFormComponent implements OnDestroy {
-    private builder;
-    private emailService;
+interface FormConfigEntry {
+    field: string;
+    value?: any;
+    required?: boolean;
+    type?: string;
+}
+export declare class ContactFormComponent implements OnInit, OnDestroy {
     buttonStyle: {
         'background-color': string;
         border: string;
@@ -17,27 +21,31 @@ export declare class ContactFormComponent implements OnDestroy {
         'backdrop-filter': string;
         'box-shadow': string;
     };
-    inputStyle: {
-        color: string;
-    };
     textStyle: {
         color: string;
     };
-    nameLabel: string;
-    emailAddressLabel: string;
-    messageLabel: string;
     sendText: string;
     sendSuccessfulText: string;
     sendErrorText: string;
-    apiURL: string;
-    email: string;
-    formGroup: UntypedFormGroup;
+    formConfig: FormConfigEntry[];
+    apiCallback: (formValue: any) => Observable<boolean>;
+    form: FormGroup<{}>;
+    fields: FormlyFieldConfig[];
+    model: {
+        [key: string]: string;
+    };
     emailSent: Subject<boolean | null>;
-    emailSent$: import("rxjs").Observable<boolean | null>;
+    emailSent$: Observable<boolean | null>;
     private unsubscribe$;
-    constructor(builder: UntypedFormBuilder, emailService: EmailApiService);
+    constructor();
+    ngOnInit(): void;
     ngOnDestroy(): void;
-    submitFormData(formData: UntypedFormGroup): void;
+    submitFormData(formData: {
+        [key: string]: string;
+    }): void;
+    private buildConfig;
+    private flattenStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<ContactFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ContactFormComponent, "contact-form", never, { "buttonStyle": "buttonStyle"; "formStyle": "formStyle"; "inputStyle": "inputStyle"; "textStyle": "textStyle"; "nameLabel": "nameLabel"; "emailAddressLabel": "emailAddressLabel"; "messageLabel": "messageLabel"; "sendText": "sendText"; "sendSuccessfulText": "sendSuccessfulText"; "sendErrorText": "sendErrorText"; "apiURL": "apiURL"; "email": "email"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContactFormComponent, "contact-form", never, { "buttonStyle": { "alias": "buttonStyle"; "required": false; }; "formStyle": { "alias": "formStyle"; "required": false; }; "textStyle": { "alias": "textStyle"; "required": false; }; "sendText": { "alias": "sendText"; "required": false; }; "sendSuccessfulText": { "alias": "sendSuccessfulText"; "required": false; }; "sendErrorText": { "alias": "sendErrorText"; "required": false; }; "formConfig": { "alias": "formConfig"; "required": false; }; "apiCallback": { "alias": "apiCallback"; "required": false; }; }, {}, never, never, true, never>;
 }
+export {};

package/package.json

@@ -1,33 +1,25 @@
 {
   "name": "@tehw0lf/contact-form",
-  "version": "0.14.4",
+  "version": "0.17.5",
   "license": "MIT",
-  "homepage": "https://github.com/tehw0lf/tehwol.fi.git",
+  "homepage": "https://github.com/tehw0lf/tehwolf.de.git",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tehw0lf/tehwol.fi.git"
+    "url": "https://github.com/tehw0lf/tehwolf.de.git"
   },
   "peerDependencies": {
-    "@angular/animations": "^14.1.3",
-    "@angular/cdk": "^14.1.3",
-    "@angular/common": "^14.1.3",
-    "@angular/core": "^14.1.3",
-    "@angular/flex-layout": "^14.0.0-beta.40",
-    "@angular/forms": "^14.1.3",
-    "@angular/material": "^14.1.3",
-    "@angular/platform-browser": "14.1.3",
-    "rxjs": "7.5.6",
-    "@angular/platform-browser-dynamic": "14.1.3"
+    "@angular/animations": "17.3.3",
+    "@angular/common": "17.3.3",
+    "@angular/core": "17.3.3",
+    "@angular/forms": "17.3.3",
+    "@ngx-formly/core": "^6.3.0",
+    "@ngx-formly/material": "^6.3.0",
+    "@tehw0lf/mvc": "^0.0.2"
   },
   "dependencies": {
     "tslib": "^2.2.0"
   },
-  "schematics": "./schematics/collection.json",
-  "module": "fesm2015/tehw0lf-contact-form.mjs",
-  "es2020": "fesm2020/tehw0lf-contact-form.mjs",
-  "esm2020": "esm2020/tehw0lf-contact-form.mjs",
-  "fesm2020": "fesm2020/tehw0lf-contact-form.mjs",
-  "fesm2015": "fesm2015/tehw0lf-contact-form.mjs",
+  "module": "fesm2022/tehw0lf-contact-form.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -35,12 +27,10 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/tehw0lf-contact-form.mjs",
-      "es2020": "./fesm2020/tehw0lf-contact-form.mjs",
-      "es2015": "./fesm2015/tehw0lf-contact-form.mjs",
-      "node": "./fesm2015/tehw0lf-contact-form.mjs",
-      "default": "./fesm2020/tehw0lf-contact-form.mjs"
+      "esm2022": "./esm2022/tehw0lf-contact-form.mjs",
+      "esm": "./esm2022/tehw0lf-contact-form.mjs",
+      "default": "./fesm2022/tehw0lf-contact-form.mjs"
     }
   },
   "sideEffects": false
-}
+}

package/esm2020/index.mjs

@@ -1,3 +0,0 @@
-export * from './lib/contact-form.module';
-export * from './lib/contact-form/contact-form.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2NvbnRhY3QtZm9ybS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJDQUEyQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvY29udGFjdC1mb3JtLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb250YWN0LWZvcm0vY29udGFjdC1mb3JtLmNvbXBvbmVudCc7XG4iXX0=