Updated to Angular 19.

Converted to standalone. Converted inputs to signals. Converted outputs to signals.
HalleyAssist · Nov 21, 2024 · de8a1db · de8a1db
1 parent 680b5f4
commit de8a1db
Show file tree

Hide file tree

Showing 37 changed files with 9,535 additions and 17,243 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -41,10 +41,10 @@ jobs:
           mv projects/ion-range-calendar/package.json.new projects/ion-range-calendar/package.json
 
       - name: Install Angular CLI
-        run: npm i -g @angular/cli
+        run: yarn global add @angular/cli
 
       - name: Install Packages
-        run: npm i
+        run: yarn
 
       - name: Build
         run: npm run build:prod

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -23,13 +23,13 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: npm
+          cache: yarn
 
       - name: Install Global Packages
-        run: npm i -g @angular/cli
+        run: yarn global add @angular/cli
 
       - name: Install Packages
-        run: npm i
+        run: yarn
 
       - name: Test
         run: npm run test:ci
@@ -43,13 +43,13 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: npm
+          cache: yarn
 
       - name: Install Global Packages
-        run: npm i -g @angular/cli
+        run: yarn global add @angular/cli
 
       - name: Install Packages
-        run: npm i
+        run: yarn
 
       - name: Build
         run: npm run build
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,6 @@
     "googlproxer",
     "ionicons",
     "packagr"
-  ]
+  ],
+  "eslint.useFlatConfig": false,
 }
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
-MIT License
+# MIT License
 
-Copyright (c) 2023 SP Tech Solutions
+Copyright (c) 2024 SP Tech Solutions
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -3,8 +3,6 @@
 [![NPM version][npm-image]][npm-url]
 [![MIT License][license-image]][license-url]
 
-Forked from : <https://github.com/hsuanxyz/ion-range-calendar>
-
 * Supports date range.
 * Supports multi date.
 * Supports HTML components.
@@ -15,86 +13,51 @@ Forked from : <https://github.com/hsuanxyz/ion-range-calendar>
 
 ## Supports
 
-* `"@ionic/angular": ">=7.0.0"`
+* `"@ionic/angular": ">=8.2.0"`
 
 ## Usage
 
 ### Installation
 
 ```bash
- npm i @googlproxer/ion-range-calendar date-fns date-fns-tz
+ npm i @googlproxer/ion-range-calendar date-fns @date-fns/tz
  ```
 
 ### Import module
 
 ```typescript
-import { NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '@ionic/angular';
-import { MyApp } from './app.component';
-...
-import { IonRangeCalendarModule } from '@googlproxer/ion-range-calendar';
-
-@NgModule({
-  declarations: [
-    MyApp,
-    ...
-  ],
-  imports: [
-    IonicModule.forRoot(),
-    IonRangeCalendarModule
-  ],
-  bootstrap: [MyApp],
-  ...
-})
-export class AppModule {}
-```
-
-### Change Defaults
-
-```typescript
-import { NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from 'ionic-angular';
-import { MyApp } from './app.component';
-...
-import { IonRangeCalendarModule } from "ion-range-calendar";
+import { Component } from '@angular/core';
+import { IonRangeCalendarComponent } from '@googlproxer/ion-range-calendar';
 
-@NgModule({
-  declarations: [
-    MyApp,
-    ...
-  ],
+@Component({
+  ...,
   imports: [
-    IonicModule.forRoot(MyApp),
-    // See CalendarComponentOptions for options
-    IonRangeCalendarModule.forRoot({
-      doneLabel: 'Save',
-      closeIcon: true
-    })
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    MyApp,
-    ...
+    IonRangeCalendarComponent
   ]
 })
-export class AppModule {}
+export class AppComponent {}
 ```
 
 ## As Component
 
 ### Basic
 
 ```html
-<ion-range-calendar [(ngModel)]="date" (change)="onChange($event)" [type]="type" [format]="'yyyy-MM-dd'">
+<ion-range-calendar [(ngModel)]="date" (ionChange)="onChange($event)" [type]="type" [format]="'yyyy-MM-dd'">
 </ion-range-calendar>
 ```
 
 ```typescript
 import { Component } from '@angular/core';
+import { IonRangeCalendarComponent } from '@googlproxer/ion-range-calendar';
 
 @Component({
   selector: 'page-home',
-  templateUrl: 'home.html'
+  templateUrl: 'home.html',
+  standalone: true,
+  imports: [
+    IonRangeCalendarComponent
+  ]
 })
 export class HomePage {
   date: string;
@@ -117,11 +80,15 @@ export class HomePage {
 
 ```typescript
 import { Component } from '@angular/core';
-import { CalendarComponentOptions } from '@googlproxer/ion-range-calendar';
+import { CalendarComponentOptions, IonRangeCalendarComponent } from '@googlproxer/ion-range-calendar';
 
 @Component({
   selector: 'page-home',
-  templateUrl: 'home.html'
+  templateUrl: 'home.html',
+  standalone: true,
+  imports: [
+    IonRangeCalendarComponent
+  ]
 })
 export class HomePage {
   dateRange: { from: string; to: string; };
@@ -144,11 +111,15 @@ export class HomePage {
 
 ```typescript
 import { Component } from '@angular/core';
-import { CalendarComponentOptions } from '@googlproxer/ion-range-calendar';
+import { CalendarComponentOptions, IonRangeCalendarComponent } from '@googlproxer/ion-range-calendar';
 
 @Component({
   selector: 'page-home',
-  templateUrl: 'home.html'
+  templateUrl: 'home.html',
+  standalone: true,
+  imports: [
+    IonRangeCalendarComponent
+  ]
 })
 export class HomePage {
   dateMulti: string[];
@@ -173,13 +144,13 @@ export class HomePage {
 
 ### Output Properties
 
-| Name        | Type           | Description                |
-| ----------- | -------------- | -------------------------- |
-| change      | `EventEmitter` | event for model change     |
-| monthChange | `EventEmitter` | event for month change     |
-| select      | `EventEmitter` | event for day select       |
-| selectStart | `EventEmitter` | event for day select       |
-| selectEnd   | `EventEmitter` | event for day select       |
+| Name           | Type           | Description                |
+| -------------- | -------------- | -------------------------- |
+| ionChange      | `EventEmitter` | event for model change     |
+| monthChange    | `EventEmitter` | event for month change     |
+| select         | `EventEmitter` | event for day select       |
+| selectStart    | `EventEmitter` | event for day select       |
+| selectEnd      | `EventEmitter` | event for day select       |
 
 ### CalendarComponentOptions
 
@@ -203,13 +174,58 @@ export class HomePage {
 
 ## As Modal
 
+In order to use the modal, you will need to set `useSetInputAPI: true` in you Application bootstrapping.
+
+```typescript
+/** main.ts */
+import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { environment } from './environments/environment';
+
+import { provideIonicAngular } from '@ionic/angular/standalone';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideIonicAngular({
+      useSetInputAPI: true, //  required for input signals on controller based modals.
+    })
+  ]
+})
+  .catch(err => console.error(err));
+```
+
+If you are still using `NgModule` , you can use the `provideIonicAngular` function to provide the `IonicAngular` module.
+
+```typescript
+import { NgModule } from '@angular/core';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  ...,
+  bootstrap: [AppComponent],
+  providers: [
+    provideIonicAngular({
+      useSetInputAPI: true, //  required for input signals on controller based modals.
+    })
+  ]
+})
+export class AppModule {}
+```
+
 ### Basic Modal
 
 Import ion-range-calendar in component controller.
 
 ```typescript
 import { Component } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
 import {
   CalendarModal,
   CalendarModalOptions,

diff --git a/angular.json b/angular.json
@@ -39,6 +39,15 @@
               }
             ]
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ion-range-calendar/src/**/*.ts",
+              "projects/ion-range-calendar/src/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -57,12 +66,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/example-app",
+            "outputPath": {
+              "base": "dist/example-app"
+            },
             "index": "projects/example-app/src/index.html",
-            "main": "projects/example-app/src/main.ts",
-            "polyfills": "projects/example-app/src/polyfills.ts",
+            "polyfills": [
+              "projects/example-app/src/polyfills.ts"
+            ],
             "tsConfig": "projects/example-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -76,7 +88,8 @@
             "styles": [
               "projects/example-app/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "projects/example-app/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -88,8 +101,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "20kb",
+                  "maximumError": "40kb"
                 }
               ],
               "fileReplacements": [
@@ -101,9 +114,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -161,15 +172,34 @@
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
+              "projects/example-app/src/**/*.ts",
+              "projects/example-app/src/**/*.html"
             ]
           }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "packageManager": "yarn",
+    "schematicCollections": [
+      "@ionic/angular-toolkit",
+      "@angular-eslint/schematics"
+    ]
+  },
+  "schematics": {
+    "@ionic/angular-toolkit:component": {
+      "styleext": "scss"
+    },
+    "@ionic/angular-toolkit:page": {
+      "styleext": "scss"
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }