build: bump angular 18

.eslintrc.json

@@ -36,9 +36,7 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/no-host-metadata-property": [
-          "off"
-        ]
+        "@angular-eslint/no-host-metadata-property": "off"
       }
     },
     {

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
       - name: run
         run: yarn run test
 
-      - uses: codecov/codecov-action@v3
+      - uses: codecov/codecov-action@v4
         name: upload
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -43,3 +43,14 @@ Thumbs.db
 
 /publish
 /yarn.lock
+
+# Yarn
+yarn.lock
+yarn-error.log
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.nvmrc

@@ -1 +1 @@
-18.12.0
+18.19.1

.yarnrc.yml

@@ -0,0 +1,5 @@
+enableImmutableInstalls: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

angular.json

@@ -28,8 +28,10 @@
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "inlineStyleLanguage": "less",
             "styles": [],
@@ -40,13 +42,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
                 }
               ],
               "outputHashing": "all"

lib/src/component.ts

@@ -10,18 +10,18 @@ import {
 } from '@angular/core';
 import { GithubButtonService } from './service';
 import { Subscription } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgStyle } from '@angular/common';
 
 const isSSR = !(typeof document === 'object' && !!document);
 
 @Component({
   selector: 'github-button',
   template: `
-    <a class="gh-btn" [href]="repo_url" target="_blank">
+    <a class="gh-btn" [attr.href]="repo_url" target="_blank">
       <span class="gh-ico" aria-hidden="true"></span>
       <span class="gh-text">{{ typeToLabel[type] }}</span>
     </a>
-    <a class="gh-count" target="_blank" [href]="count_url" [ngStyle]="{ display: showZero || count > 0 ? 'block' : 'none' }">
+    <a class="gh-count" target="_blank" [attr.href]="count_url" [ngStyle]="{ display: showZero || count > 0 ? 'block' : 'none' }">
       {{ count }}
     </a>
     <ng-content></ng-content>
@@ -34,7 +34,7 @@ const isSSR = !(typeof document === 'object' && !!document);
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [NgStyle],
 })
 export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
   private notify$?: Subscription;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-github-button",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "Unofficial GitHub buttons in Angular.",
   "keywords": [
     "angular",
@@ -32,39 +32,41 @@
     "release:next": "npm run build && cd publish && npm publish --access public --tag next"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.4",
+    "@angular-eslint/builder": "^18.0.0",
+    "@angular-eslint/eslint-plugin": "^18.0.0",
+    "@angular-eslint/eslint-plugin-template": "^18.0.0",
+    "@angular-eslint/schematics": "^18.0.0",
+    "@angular-eslint/template-parser": "^18.0.0",
+    "@angular/cli": "^18.0.4",
+    "@angular/compiler-cli": "^18.0.0",
+    "@types/file-saver": "^2.0.5",
     "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "eslint": "^8.53.0",
+    "file-saver": "^2.0.5",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2",
-    "@angular-eslint/builder": "^17.0.0",
-    "@angular-eslint/eslint-plugin": "^17.0.0",
-    "@angular-eslint/eslint-plugin-template": "^17.0.0",
-    "@angular-eslint/schematics": "^17.0.0",
-    "@angular-eslint/template-parser": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "ng-packagr": "^17.0.0",
-    "ngx-highlight-js": "^17.0.0"
+    "ng-packagr": "^18.0.0",
+    "ngx-highlight-js": "^18.0.0",
+    "typescript": "~5.4.2"
   }
 }

src/app.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { GithubButtonComponent } from 'ng-github-button';
-import { HighlightJsModule } from 'ngx-highlight-js';
+import { HighlightJsDirective } from 'ngx-highlight-js';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
   standalone: true,
-  imports: [GithubButtonComponent, HighlightJsModule],
+  imports: [GithubButtonComponent, HighlightJsDirective],
 })
 export class AppComponent {}

tsconfig.app.json

@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {

tsconfig.json

@@ -2,20 +2,18 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
@@ -24,6 +22,7 @@
       "ES2022",
       "dom"
     ],
+    "baseUrl": "./",
     "paths": {
       "ng-github-button": [
         "lib/index"

tsconfig.spec.json

@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -8,6 +9,7 @@
     ]
   },
   "include": [
-    "lib/**/*.spec.ts"
+    "lib/**/*.spec.ts",
+    "lib/**/*.d.ts"
   ]
 }