v18

.github/workflows/gh-pages.yaml

@@ -48,7 +48,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "18.13.0"
+          node-version: "20.11.1"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Restore cache
         uses: actions/cache@v3

.github/workflows/main.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.13.0]
+        node-version: [20.11.0]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -27,5 +27,6 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm i -g yarn
-    - run: yarn --check-files
+    - run: enable corepack
+    - run: yarn install
     - run: npm run build

.github/workflows/npm-publish-github-packages.yml

@@ -0,0 +1,30 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish on NPM
+
+on:
+    release:
+        types: [ created ]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v3
+            -   uses: actions/setup-node@v3
+                with:
+                    node-version: 20.11.1
+                    registry-url: https://registry.npmjs.org/
+            -   run: corepack enable
+            -   run: yarn install
+            -   run: npm run build
+            -   run: |
+                    pkgversion=$(node -p -e "require('./package.json').version")
+                    if [[ $pkgversion == *"beta"*  || $pkgversion =~ -rc\.[0-9]+$ ]]; then
+                        npm run release:beta
+                    else
+                        npm run release
+                    fi
+                env:
+                    NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -49,3 +49,12 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Yarn Berry
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

angular.json

@@ -61,11 +61,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ngx-mat-timepicker-repo",
+            "outputPath": {
+              "base": "dist/ngx-mat-timepicker-repo"
+            },
             "index": "projects/ngx-mat-timepicker-repo/src/index.html",
-            "main": "projects/ngx-mat-timepicker-repo/src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -81,7 +82,8 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "prismjs"
-            ]
+            ],
+            "browser": "projects/ngx-mat-timepicker-repo/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -106,9 +108,7 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

changelog.md

@@ -1,3 +1,6 @@
+#18.0.0
+* Update for Angular 18! 🎉
+
 #17.1.0
 * Add option `dottedMinutesInGap`
 * Fix mini-fab appearance (closes [#105](https://github.com/tonysamperi/ngx-mat-timepicker/issues/105))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-timepicker-repo",
-  "version": "17.1.0",
+  "version": "18.0.0",
   "build": 0,
   "license": "MIT",
   "private": true,
@@ -18,12 +18,13 @@
     "email": "github@tonysamperi.it"
   },
   "keywords": [
-    "Angular 9+",
+    "Angular 18",
     "Material timepicker",
     "Timepicker",
     "Android timepicker",
     "Mobile timepicker",
-    "Time picker"
+    "Time picker",
+    "Angular 9+"
   ],
   "scripts": {
     "ng": "ng",
@@ -36,22 +37,22 @@
     "bump:minor": "gulp bump:minor",
     "bump:major": "gulp bump:major",
     "bump:beta": "gulp bump:beta",
-    "publish": "npm publish ./dist/ngx-mat-timepicker",
-    "publish:beta": "npm publish ./dist/ngx-mat-timepicker --tag beta",
+    "release": "npm publish ./dist/ngx-mat-timepicker",
+    "release:beta": "npm publish ./dist/ngx-mat-timepicker --tag beta",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.4",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.4",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/ssr": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/ssr": "^18.0.0",
     "rxjs": "^7.4.0",
     "t-writer.js": "^1.0.4",
     "ts-luxon": "^4.3.2",
@@ -60,10 +61,10 @@
     "zone.js": "^0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
     "@types/jasmine": "~4.0.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.18.3",
@@ -77,17 +78,18 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0",
     "plugin-log": "^0.1.0",
     "prismjs": "^1.29.0",
     "semver": "^7.3.8",
     "through2": "^4.0.2",
     "ts-node": "~10.9.1",
     "tslint": "^6.1.3",
     "tslint-consistent-codestyle": "^1.16.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.5"
   },
   "engines": {
     "node": ">=14.20.0"
-  }
-}
+  },
+  "packageManager": "yarn@4.3.1"
+}

projects/ngx-mat-timepicker-repo/src/assets/messages.json

@@ -1,5 +1,11 @@
 {
   "messages": [
+    {
+      "text": "⚡ 29/06/2024: published V18 RC 0! Check it out!",
+      "opts": {
+        "loop": true
+      }
+    },
     {
       "text": "⚡ 08/11/2023: published V17! Check it out!",
       "opts": {

projects/ngx-mat-timepicker-repo/src/scss/themes.scss

@@ -1,32 +1,32 @@
 @use "@angular/material" as mat;
 
 // Define the default theme (same as the example above).
-$candy-app-primary: mat.define-palette(mat.$indigo-palette);
-$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$candy-app-warn: mat.define-palette(mat.$red-palette, A200, A100, A400);
+$candy-app-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$candy-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
+$candy-app-warn: mat.m2-define-palette(mat.$m2-red-palette, A200, A100, A400);
 $candy-app-theme-config: (
 		color: (
 				primary: $candy-app-primary,
 				accent: $candy-app-accent,
 				warn: $candy-app-warn,
 		),
-		typography: mat.define-typography-config(),
+		typography: mat.m2-define-typography-config(),
 		density: 0,
 );
-$candy-app-theme: mat.define-light-theme($candy-app-theme-config);
+$candy-app-theme: mat.m2-define-light-theme($candy-app-theme-config);
 
 // Define an alternate dark theme.
 
-$dark-primary: mat.define-palette(mat.$pink-palette);
-$dark-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
-$dark-warn: mat.define-palette(mat.$deep-orange-palette);
+$dark-primary: mat.m2-define-palette(mat.$m2-pink-palette);
+$dark-accent: mat.m2-define-palette(mat.$m2-blue-grey-palette, A200, A100, A400);
+$dark-warn: mat.m2-define-palette(mat.$m2-deep-orange-palette);
 $dark-theme-config: (
 		color: (
 				primary: $dark-primary,
 				accent: $dark-accent,
 				warn: $dark-warn,
 		),
-		typography: mat.define-typography-config(),
+		typography: mat.m2-define-typography-config(),
 		density: 0,
 );
-$dark-theme: mat.define-dark-theme($dark-theme-config);
+$dark-theme: mat.m2-define-dark-theme($dark-theme-config);

projects/ngx-mat-timepicker-repo/src/styles.scss

@@ -9,10 +9,10 @@
 	src: url("assets/fonts/MaterialIcons-Regular.woff") format("woff");
 }
 
-$primary-color: mat.get-color-from-palette($candy-app-primary);
-$accent-color: mat.get-color-from-palette($candy-app-accent);
-$primary-color-dark: mat.get-color-from-palette($dark-primary);
-$accent-color-dark: mat.get-color-from-palette($dark-accent);
+$primary-color: mat.m2-get-color-from-palette($candy-app-primary);
+$accent-color: mat.m2-get-color-from-palette($candy-app-accent);
+$primary-color-dark: mat.m2-get-color-from-palette($dark-primary);
+$accent-color-dark: mat.m2-get-color-from-palette($dark-accent);
 
 body {
 	margin: 0;
@@ -105,7 +105,7 @@ body {
 
 	.ngx-mtp-top, footer {
 		background-color: $primary-color;
-		color: mat.get-color-from-palette($candy-app-primary, default-contrast);
+		color: mat.m2-get-color-from-palette($candy-app-primary, default-contrast);
 	}
 
 	.mat-color-primary {
@@ -117,7 +117,7 @@ body {
 	}
 
 	.mat-color-warn {
-		color: mat.get-color-from-palette($candy-app-warn);
+		color: mat.m2-get-color-from-palette($candy-app-warn);
 	}
 
 	.ngx-mtp-margin-top {
@@ -159,10 +159,10 @@ body {
 		a {
 			&.mat-color-primary {
 				color: $primary-color-dark;
-				border-bottom: 2px solid rgba(mat.get-color-from-palette($dark-primary), 0.25);
+				border-bottom: 2px solid rgba(mat.m2-get-color-from-palette($dark-primary), 0.25);
 
 				&:hover {
-					border-bottom: 2px solid rgba(mat.get-color-from-palette($dark-primary), 1);
+					border-bottom: 2px solid rgba(mat.m2-get-color-from-palette($dark-primary), 1);
 				}
 			}
 
@@ -187,7 +187,7 @@ body {
 
 		.ngx-mtp-top, footer {
 			background-color: $primary-color-dark;
-			color: mat.get-color-from-palette($dark-primary, default-contrast);
+			color: mat.m2-get-color-from-palette($dark-primary, default-contrast);
 		}
 
 		.mat-color-primary {
@@ -199,7 +199,7 @@ body {
 		}
 
 		.mat-color-warn {
-			color: mat.get-color-from-palette($dark-warn);
+			color: mat.m2-get-color-from-palette($dark-warn);
 		}
 	}
 }

projects/ngx-mat-timepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-timepicker",
-  "version": "17.1.0",
+  "version": "18.0.0",
   "license": "MIT",
   "description": "ngx-mat-timepicker is an Angular material 9+ extension to add time pickers!",
   "homepage": "https://tonysamperi.github.io/ngx-mat-timepicker",
@@ -28,13 +28,13 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0"
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0"
   }
 }

tsconfig.json

@@ -20,7 +20,6 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,