feat: convert to standalone

Fixes #57

Fixes #56

Author: mattlewis92

README.md

@@ -32,26 +32,18 @@ npm install flatpickr angularx-flatpickr
 
 Next, in your `angular.json` add `"node_modules/flatpickr/dist/flatpickr.css"` to the `styles` array of your application
 
-Then include in your apps module:
-
-```typescript
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { FlatpickrModule } from 'angularx-flatpickr';
-
-@NgModule({
-  imports: [FormsModule, FlatpickrModule.forRoot()],
-})
-export class MyModule {}
-```
-
-Finally use in one of your apps components:
+Then use in one of your apps components:
 
 ```typescript
 import { Component } from '@angular/core';
+import { FlatpickrDirective, provideFlatpickrDefaults } from 'angularx-flatpickr';
 
 @Component({
-  template: ` <input type="text" mwlFlatpickr [(ngModel)]="selectedDate" [altInput]="true" [convertModelValue]="true" /> `,
+  imports: [FlatpickrDirective],
+  providers: [provideFlatpickrDefaults()],
+  template: `<input type="text" mwlFlatpickr [(ngModel)]="selectedDate" [altInput]="true" [convertModelValue]="true" />`,
+  standalone: true,
+  selector: 'my-component',
 })
 export class MyComponent {}
 ```

projects/angularx-flatpickr/src/lib/flatpickr.directive.ts

@@ -44,6 +44,7 @@ export const FLATPICKR_CONTROL_VALUE_ACCESSOR: any = {
   selector: '[mwlFlatpickr]',
   providers: [FLATPICKR_CONTROL_VALUE_ACCESSOR],
   exportAs: 'mwlFlatpickr',
+  standalone: true,
 })
 export class FlatpickrDirective
   implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor

projects/angularx-flatpickr/src/lib/flatpickr.module.ts

@@ -12,16 +12,31 @@ import {
 
 export const USER_DEFAULTS = new InjectionToken('flatpickr defaults');
 
-export function defaultsFactory(
-  userDefaults: FlatpickrDefaultsInterface,
-): FlatpickrDefaults {
-  const defaults: FlatpickrDefaults = new FlatpickrDefaults();
-  Object.assign(defaults, userDefaults);
-  return defaults;
+export function provideFlatpickrDefaults(
+  userDefaults: FlatpickrDefaultsInterface = {},
+): Provider[] {
+  return [
+    {
+      provide: USER_DEFAULTS,
+      useValue: userDefaults,
+    },
+    {
+      provide: FlatpickrDefaults,
+      useFactory() {
+        const defaults: FlatpickrDefaults = new FlatpickrDefaults();
+        Object.assign(defaults, userDefaults);
+        return defaults;
+      },
+      deps: [USER_DEFAULTS],
+    },
+  ];
 }
 
+/**
+ * @deprecated Will be removed in the next major version. Please use the standalone `FlatpickrDirective` and `provideFlatpickrDefaults()` instead.
+ */
 @NgModule({
-  declarations: [FlatpickrDirective],
+  imports: [FlatpickrDirective],
   exports: [FlatpickrDirective],
 })
 export class FlatpickrModule {
@@ -30,17 +45,7 @@ export class FlatpickrModule {
   ): ModuleWithProviders<FlatpickrModule> {
     return {
       ngModule: FlatpickrModule,
-      providers: [
-        {
-          provide: USER_DEFAULTS,
-          useValue: userDefaults,
-        },
-        {
-          provide: FlatpickrDefaults,
-          useFactory: defaultsFactory,
-          deps: [USER_DEFAULTS],
-        },
-      ],
+      providers: provideFlatpickrDefaults(userDefaults),
     };
   }
 }

projects/demo/app/demo.component.ts

@@ -1,7 +1,16 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import {
+  FlatpickrDirective,
+  provideFlatpickrDefaults,
+} from 'angularx-flatpickr';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
 
 @Component({
   selector: 'mwl-demo-app',
+  standalone: true,
+  imports: [FlatpickrDirective, FormsModule, JsonPipe],
+  providers: [provideFlatpickrDefaults()],
   template: `
     <div class="container-fluid">
       <div class="row">

projects/demo/app/demo.module.ts

@@ -1,13 +1,11 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { DemoModule } from './app/demo.module';
 import { environment } from './environments/environment';
+import { DemoComponent } from './app/demo.component';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(DemoModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(DemoComponent).catch((err) => console.error(err));