release: 14.0.0 (#114)

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -23,7 +23,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -40,7 +40,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -54,7 +54,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 

angular.json

@@ -103,6 +103,8 @@
   },
   "defaultProject": "ngx-countdown",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

lib/package.json

@@ -1,14 +1,15 @@
 {
   "name": "ngx-countdown",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Simple, easy and performance countdown for angular",
   "keywords": [
     "ngx-countdown",
     "ng-countdown",
     "angular-countdown",
     "angular countdown",
     "countdown",
-    "count down"
+    "count down",
+    "angular standalone library"
   ],
   "author": "cipchk <[email protected]>",
   "license": "MIT",

lib/src/countdown.component.ts

@@ -20,6 +20,7 @@ import {
 import { CountdownConfig, CountdownStatus, CountdownEvent, CountdownEventAction, CountdownItem } from './interfaces';
 import { CountdownTimer } from './countdown.timer';
 import { CountdownGlobalConfig } from './countdown.config';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'countdown',
@@ -32,6 +33,9 @@ import { CountdownGlobalConfig } from './countdown.config';
   host: { '[class.count-down]': 'true' },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  providers: [CountdownTimer],
+  standalone: true,
 })
 export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
   private frequency = 1000;

lib/src/countdown.module.ts

@@ -1,13 +1,9 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { CountdownComponent } from './countdown.component';
-import { CountdownTimer } from './countdown.timer';
 
 @NgModule({
-  imports: [CommonModule],
-  providers: [CountdownTimer],
-  declarations: [CountdownComponent],
+  imports: [CountdownComponent],
   exports: [CountdownComponent],
 })
 export class CountdownModule {}

package.json

@@ -1,14 +1,15 @@
 {
   "name": "ngx-countdown",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Simple, easy and performance countdown for angular",
   "keywords": [
     "ngx-countdown",
     "ng-countdown",
     "angular-countdown",
     "angular countdown",
     "countdown",
-    "count down"
+    "count down",
+    "angular standalone library"
   ],
   "author": "cipchk <[email protected]>",
   "license": "MIT",
@@ -22,50 +23,49 @@
   "homepage": "https://cipchk.github.io/ngx-countdown/",
   "scripts": {
     "analyze": "ng b --stats-json --source-map",
-    "lint": "ng l",
+    "lint": "ng lint",
     "test": "ng t --no-progress --browsers=ChromeHeadlessCI --code-coverage --no-watch",
     "build": "node scripts/build.js",
     "release:next": "npm run build && cd publish && npm publish --access public --tag next",
     "release": "npm run build && cd publish && npm publish --access public"
   },
   "dependencies": {
-    "@angular/animations": "~13.1.1",
-    "@angular/common": "~13.1.1",
-    "@angular/compiler": "~13.1.1",
-    "@angular/core": "~13.1.1",
-    "@angular/forms": "~13.1.1",
-    "@angular/platform-browser": "~13.1.1",
-    "@angular/platform-browser-dynamic": "~13.1.1",
-    "@angular/router": "~13.1.1",
-    "rxjs": "~7.4.0",
-    "tslib": "^2.3.1",
+    "@angular/animations": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4",
     "bootstrap": "^5.1.3",
-    "ngx-highlight-js": "^13.0.0",
-    "date-fns": "^2.27.0"
+    "ngx-highlight-js": "^14.0.0",
+    "date-fns": "^2.28.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.1.2",
-    "@angular/cli": "~13.1.2",
-    "@angular/compiler-cli": "~13.1.0",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~3.10.0",
+    "@angular-devkit/build-angular": "^14.0.3",
+    "@angular/cli": "~14.0.3",
+    "@angular/compiler-cli": "^14.0.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.1.0",
     "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-chrome-launcher": "~3.1.1",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.5.2",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/schematics": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
+    "typescript": "~4.7.4",
+    "@angular-eslint/builder": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^14.0.0",
+    "@angular-eslint/eslint-plugin-template": "^14.0.0",
+    "@angular-eslint/schematics": "^14.0.0",
+    "@angular-eslint/template-parser": "^14.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.5.0",
-    "ng-packagr": "^13.1.2"
+    "eslint": "^8.18.0",
+    "ng-packagr": "^14.0.2"
   }
 }

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { AccuracyComponent } from './components/accuracy.component';
 import { CustomFormatComponent } from './components/custom-format.component';
 import { BasicComponent } from './components/basic.component';
 import { KeepingWhenRefreshComponent } from './components/keeping-when-refresh.component';
+import { StandaloneComponent } from './standalone.component';
 
 export function countdownConfigFactory(): CountdownConfig {
   return {};
@@ -47,6 +48,7 @@ export function countdownConfigFactory(): CountdownConfig {
             { path: '', component: DemoComponent },
             { path: 'alot', component: ALotComponent },
             { path: 'nothing', component: NothingComponent },
+            { path: 'standalone', component: StandaloneComponent },
           ],
         },
         {

src/app/components/layout.component.ts

@@ -26,6 +26,9 @@ import { Component } from '@angular/core';
           <li class="nav-item">
             <a class="nav-link" routerLink="/nothing">Performance</a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/standalone">Standalone</a>
+          </li>
         </ul>
       </div>
     </nav>

src/app/standalone.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CountdownModule } from 'ngx-countdown';
+
+@Component({
+  selector: 'standalone-demo',
+  template: ` <countdown [config]="{ leftTime: 30 }"></countdown> `,
+  standalone: true,
+  imports: [CountdownModule],
+})
+export class StandaloneComponent {}

tsconfig.json

@@ -16,7 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2020",