perf(directive): as standalone

projects/uiowa/digit-only/README.md

@@ -67,15 +67,21 @@ npm i @uiowa/digit-only
 
 ```typescript
 // in your Angular module
-import { DigitOnlyModule } from '@uiowa/digit-only';
+import {   
+  DigitOnlyDirective,
+  MaskDirective,
+} from '@uiowa/digit-only';
 
 @NgModule({
   declarations: [
     ...
   ],
   imports: [
     BrowserModule,
-    DigitOnlyModule
+
+    // DigitOnly
+    DigitOnlyDirective,
+    MaskDirective,
   ],
   ...
 })

projects/uiowa/digit-only/package.json

@@ -20,8 +20,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=12.0.0",
-    "@angular/core": ">=12.0.0"
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/uiowa/digit-only/src/lib/digit-only.directive.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 
 @Directive({
+  standalone: true,
   selector: '[digitOnly]',
 })
 export class DigitOnlyDirective implements OnChanges {

projects/uiowa/digit-only/src/lib/mask.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';
 
 @Directive({
+  standalone: true,
   selector: '[mask]',
 })
 export class MaskDirective implements OnInit {

projects/uiowa/digit-only/src/public-api.ts

@@ -4,4 +4,3 @@
 
 export * from './lib/digit-only.directive';
 export * from './lib/mask.directive';
-export * from './lib/digit-only.module';

src/app/app.module.ts

@@ -1,26 +1,31 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 
+import {
+  DigitOnlyDirective,
+  MaskDirective,
+} from '../../projects/uiowa/digit-only/src/public-api';
 import { AppComponent } from './app.component';
 import { DigitOnlyDemosComponent } from './digit-only-demos/digit-only-demos.component';
 import { MaskDemosComponent } from './mask-demos/mask-demos.component';
-import { DigitOnlyModule } from '../../projects/uiowa/digit-only/src/public-api';
-// import { DigitOnlyModule } from '@uiowa/digit-only';
 
 @NgModule({
   declarations: [AppComponent, DigitOnlyDemosComponent, MaskDemosComponent],
   imports: [
     BrowserModule,
     FormsModule,
-    DigitOnlyModule,
     RouterModule.forRoot([
       { path: '', pathMatch: 'full', redirectTo: 'demo' },
       { path: 'demo', component: DigitOnlyDemosComponent },
       { path: 'mask', component: MaskDemosComponent },
       { path: '**', redirectTo: '' },
     ]),
+
+    // DigitOnly
+    DigitOnlyDirective,
+    MaskDirective,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/digit-only-demos/digit-only-demos.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-digit-only-demos',
   templateUrl: './digit-only-demos.component.html',
   styleUrls: ['./digit-only-demos.component.css'],
 })
-export class DigitOnlyDemosComponent implements OnInit {
+export class DigitOnlyDemosComponent {
   amount: string = '';
   min = 0;
   max = 10;
@@ -14,7 +14,6 @@ export class DigitOnlyDemosComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit(): void {}
   watchAmountValue() {
     const value = Number(this.amount);
     this.amount = value.toFixed(2);

src/app/mask-demos/mask-demos.component.ts

@@ -1,15 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-mask-demos',
   templateUrl: './mask-demos.component.html',
-  styleUrls: ['./mask-demos.component.css']
+  styleUrls: ['./mask-demos.component.css'],
 })
-export class MaskDemosComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
+export class MaskDemosComponent {}