@tehw0lf/contact-form 0.14.3 → 0.17.1

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,11 @@ 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
 ```
 
 ### Module
@@ -28,37 +24,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 +97,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-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}\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-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFjdC1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29udGFjdC1mb3JtL3NyYy9saWIvY29udGFjdC1mb3JtL2NvbnRhY3QtZm9ybS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbnRhY3QtZm9ybS9zcmMvbGliL2NvbnRhY3QtZm9ybS9jb250YWN0LWZvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDckQsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBR0wsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNoRSxPQUFPLEVBQXFCLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ25FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzVELE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQTBCaEQsTUFBTSxPQUFPLG9CQUFvQjtJQXdDL0I7UUF2Q1MsZ0JBQVcsR0FBRztZQUNyQixrQkFBa0IsRUFBRSxTQUFTO1lBQzdCLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLFNBQVM7U0FDakIsQ0FBQztRQUVPLGNBQVMsR0FBRztZQUNuQixLQUFLLEVBQUUsU0FBUztZQUNoQixrQkFBa0IsRUFBRSx3QkFBd0I7WUFDNUMsaUJBQWlCLEVBQUUsWUFBWTtZQUMvQixZQUFZLEVBQUUsaUNBQWlD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QUFXLENBQUM7YUFDL0IsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDakIsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztRQUNyQyxDQUFDLENBQUM7YUFDRCxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDZCxDQUFDOzhHQS9GVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixzVEN2Q2pDLHduQkF1QkEsMFlEUUksWUFBWSw4QkFDWixtQkFBbUIsb2JBQ25CLFlBQVksNktBQ1osb0JBQW9CLCtCQUNwQixPQUFPLHNFQUNQLFNBQVM7OzJGQUdBLG9CQUFvQjtrQkFoQmhDLFNBQVM7K0JBRUUsY0FBYyxpQkFFVCxpQkFBaUIsQ0FBQyxJQUFJLGNBRXpCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsWUFBWTt3QkFDWixvQkFBb0I7d0JBQ3BCLE9BQU87d0JBQ1AsU0FBUztxQkFDVjt3REFHUSxXQUFXO3NCQUFuQixLQUFLO2dCQU1HLFNBQVM7c0JBQWpCLEtBQUs7Z0JBT0csU0FBUztzQkFBakIsS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBT0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExheW91dE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgQXN5bmNQaXBlLCBOZ1N0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEZvcm1seUZpZWxkQ29uZmlnLCBGb3JtbHlNb2R1bGUgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcbmltcG9ydCB7IEZvcm1seU1hdGVyaWFsTW9kdWxlIH0gZnJvbSAnQG5neC1mb3JtbHkvbWF0ZXJpYWwnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmludGVyZmFjZSBGb3JtQ29uZmlnRW50cnkge1xuICBmaWVsZDogc3RyaW5nO1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICB2YWx1ZT86IGFueTtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICB0eXBlPzogc3RyaW5nO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdjb250YWN0LWZvcm0nLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udGFjdC1mb3JtLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3R5bGVVcmxzOiBbJy4vY29udGFjdC1mb3JtLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBMYXlvdXRNb2R1bGUsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBGb3JtbHlNb2R1bGUsXG4gICAgRm9ybWx5TWF0ZXJpYWxNb2R1bGUsXG4gICAgTmdTdHlsZSxcbiAgICBBc3luY1BpcGVcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDb250YWN0Rm9ybUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgYnV0dG9uU3R5bGUgPSB7XG4gICAgJ2JhY2tncm91bmQtY29sb3InOiAnIzMzMzMzMycsXG4gICAgYm9yZGVyOiAnbm9uZScsXG4gICAgY29sb3I6ICcjY2M3ODMyJ1xuICB9O1xuXG4gIEBJbnB1dCgpIGZvcm1TdHlsZSA9IHtcbiAgICBjb2xvcjogJyM0MzdkYTgnLFxuICAgICdiYWNrZ3JvdW5kLWNvbG9yJzogJ3JnYmEoMzQsIDM0LCAzNCwgMC43NSknLFxuICAgICdiYWNrZHJvcC1maWx0ZXInOiAnYmx1cig1MHB4KScsXG4gICAgJ2JveC1zaGFkb3cnOiAnMCAycHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMDc1KSdcbiAgfTtcblxuICBASW5wdXQoKSB0ZXh0U3R5bGUgPSB7IGNvbG9yOiAnI2NjNzgzMicgfTtcblxuICBASW5wdXQoKSBzZW5kVGV4dCA9ICdTZW5kJztcblxuICBASW5wdXQoKSBzZW5kU3VjY2Vzc2Z1bFRleHQgPSAnRS1NYWlsIHN1Y2Nlc3NmdWxseSBzZW50JztcblxuICBASW5wdXQoKSBzZW5kRXJyb3JUZXh0ID0gJ1NlbmQgZXJyb3InO1xuXG4gIEBJbnB1dCgpIGZvcm1Db25maWc6IEZvcm1Db25maWdFbnRyeVtdID0gW1xuICAgIHsgZmllbGQ6ICduYW1lJywgcmVxdWlyZWQ6IHRydWUgfSxcbiAgICB7IGZpZWxkOiAnZW1haWwnLCByZXF1aXJlZDogdHJ1ZSB9LFxuICAgIHsgZmllbGQ6ICdtZXNzYWdlJywgcmVxdWlyZWQ6IHRydWUsIHR5cGU6ICd0ZXh0YXJlYScgfVxuICBdO1xuXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gIEBJbnB1dCgpIGFwaUNhbGxiYWNrITogKGZvcm1WYWx1ZTogYW55KSA9PiBPYnNlcnZhYmxlPGJvb2xlYW4+O1xuXG4gIGZvcm0gPSBuZXcgRm9ybUdyb3VwKHt9KTtcbiAgZmllbGRzOiBGb3JtbHlGaWVsZENvbmZpZ1tdID0gW107XG4gIG1vZGVsOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9ID0ge307XG5cbiAgZW1haWxTZW50OiBTdWJqZWN0PGJvb2xlYW4gfCBudWxsPiA9IG5ldyBTdWJqZWN0KCk7XG4gIGVtYWlsU2VudCQgPSB0aGlzLmVtYWlsU2VudC5hc09ic2VydmFibGUoKTtcblxuICBwcml2YXRlIHVuc3Vic2NyaWJlJDogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5lbWFpbFNlbnQubmV4dChudWxsKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYnVpbGRDb25maWcoKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMudW5zdWJzY3JpYmUkLm5leHQoKTtcbiAgICB0aGlzLnVuc3Vic2NyaWJlJC5jb21wbGV0ZSgpO1xuICB9XG5cbiAgc3VibWl0Rm9ybURhdGEoZm9ybURhdGE6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH0pIHtcbiAgICB0aGlzLmFwaUNhbGxiYWNrKGZvcm1EYXRhKVxuICAgICAgLnBpcGUoXG4gICAgICAgIHRhcCgoc3VjY2VzczogYm9vbGVhbikgPT4gdGhpcy5lbWFpbFNlbnQubmV4dChzdWNjZXNzKSksXG4gICAgICAgIHRha2VVbnRpbCh0aGlzLnVuc3Vic2NyaWJlJClcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIHByaXZhdGUgYnVpbGRDb25maWcoKTogdm9pZCB7XG4gICAgdGhpcy5mb3JtQ29uZmlnLmZvckVhY2goKGVudHJ5OiBGb3JtQ29uZmlnRW50cnkpID0+IHtcbiAgICAgIGlmIChlbnRyeS52YWx1ZSkge1xuICAgICAgICB0aGlzLm1vZGVsW2VudHJ5LmZpZWxkXSA9IGVudHJ5LnZhbHVlO1xuICAgICAgfVxuXG4gICAgICB0aGlzLmZpZWxkcy5wdXNoKHtcbiAgICAgICAga2V5OiBlbnRyeS5maWVsZCxcbiAgICAgICAgdHlwZTogZW50cnkudHlwZSA/IGVudHJ5LnR5cGUgOiAnaW5wdXQnLFxuICAgICAgICBwcm9wczoge1xuICAgICAgICAgIGxhYmVsOiBlbnRyeS5maWVsZC50b0xvY2FsZVVwcGVyQ2FzZSgpLFxuICAgICAgICAgIHBsYWNlaG9sZGVyOiAnRW50ZXIgJyArIGVudHJ5LmZpZWxkLFxuICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLFxuICAgICAgICAgIGF0dHJpYnV0ZXM6IHsgc3R5bGU6IHRoaXMuZmxhdHRlblN0eWxlKHRoaXMudGV4dFN0eWxlKSB9XG4gICAgICAgIH0sXG4gICAgICAgIHRlbXBsYXRlT3B0aW9uczpcbiAgICAgICAgICBlbnRyeS50eXBlID09PSAndGV4dGFyZWEnXG4gICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICBhdXRvc2l6ZTogdHJ1ZSxcbiAgICAgICAgICAgICAgICBtaW5Sb3dzOiA1LFxuICAgICAgICAgICAgICAgIG1heFJvd3M6IDEwXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDoge31cbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBmbGF0dGVuU3R5bGUoc3R5bGVPYmplY3Q6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH0pOiBzdHJpbmcge1xuICAgIHJldHVybiBPYmplY3QuZW50cmllcyhzdHlsZU9iamVjdClcbiAgICAgIC5mbGF0TWFwKChlbnRyeSkgPT4ge1xuICAgICAgICByZXR1cm4gYCR7ZW50cnlbMF19OiAke2VudHJ5WzFdfTtgO1xuICAgICAgfSlcbiAgICAgIC5qb2luKCcnKTtcbiAgfVxufVxuIiwiPGZvcm1cbiAgW25nU3R5bGVdPVwiZm9ybVN0eWxlXCJcbiAgY2xhc3M9XCJjb250YWN0LWZvcm0gZmxleC1jb2x1bW4gZmxleC1meGZsZXhcIlxuICBbZm9ybUdyb3VwXT1cImZvcm1cIlxuICAobmdTdWJtaXQpPVwic3VibWl0Rm9ybURhdGEobW9kZWwpXCJcbj5cbiAgPGZvcm1seS1mb3JtIFtmb3JtXT1cImZvcm1cIiBbZmllbGRzXT1cImZpZWxkc1wiIFttb2RlbF09XCJtb2RlbFwiPjwvZm9ybWx5LWZvcm0+XG4gIDxidXR0b25cbiAgICBbbmdTdHlsZV09XCJidXR0b25TdHlsZVwiXG4gICAgY2xhc3M9XCJmb3JtLWJ1dHRvblwiXG4gICAgdHlwZT1cInN1Ym1pdFwiXG4gICAgW2Rpc2FibGVkXT1cIiFmb3JtLnZhbGlkXCJcbiAgPlxuICAgIHt7IHNlbmRUZXh0IH19XG4gIDwvYnV0dG9uPlxuICA8ZGl2IFtuZ1N0eWxlXT1cInRleHRTdHlsZVwiIGNsYXNzPVwiZm9ybS1zdGF0dXNcIj5cbiAgICBAaWYgKChlbWFpbFNlbnQkIHwgYXN5bmMpID09PSB0cnVlKSB7XG4gICAgICB7eyBzZW5kU3VjY2Vzc2Z1bFRleHQgfX1cbiAgICB9IEBlbHNlIGlmICgoZW1haWxTZW50JCB8IGFzeW5jKSA9PT0gZmFsc2UpIHtcbiAgICAgIHt7IHNlbmRFcnJvclRleHQgfX1cbiAgICB9XG4gIDwvZGl2PlxuPC9mb3JtPlxuIl19

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-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}\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-column{display:flex;flex-direction:column;box-sizing:border-box}.flex-fxflex{flex:1 1 0%}\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,24 @@
 {
   "name": "@tehw0lf/contact-form",
-  "version": "0.14.3",
+  "version": "0.17.1",
   "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"
   },
   "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 +26,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=