use latest @shiftcode dependencies + node 24

.github/workflows/main.yml

@@ -21,45 +21,39 @@ jobs:
     outputs:
       shouldExecute: ${{ steps.stepCheckExecution.outputs.shouldExecute }}
     steps:
-      - name: Dump GitHub context
-        run: |
-          echo "::group::github context"
-          echo "$GITHUB_CONTEXT"
-          echo "::endgroup::"
-        env:
-          GITHUB_CONTEXT: ${{ toJson(github) }}
       - id: stepCheckExecution
         name: Check for execution
-        uses: shiftcode/github-action-skip@v4.0.0
+        uses: shiftcode/github-action-skip@9d4a90c80567f59dfaacf18fe703a324583c742e #v5.0.0
         with:
           skipOnCommitMsg: '[skip_build]'
           githubToken: ${{ secrets.GITHUB_TOKEN }}
   build:
     runs-on: ubuntu-latest
     needs: checkExecution
+    permissions:
+      contents: read
+      packages: write
     # only execute if not skipped by commit message
     if: needs.checkExecution.outputs.shouldExecute == 'true'
     steps:
       # checkout branch
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd #v5.0.1
         with:
           # 0 indicates all history, because publish requires tag information
           fetch-depth: 0
-          # we need priviledged access to publish to protected branch
-          token: ${{ secrets.GH_TOKEN_PUBLIC_REPO }}
+          # do not persist credentials to avoid issues with protected branches (e.g. when pushing version-bump commit after merging PR)
+          persist-credentials: false
       # setup node and dependency cache
       - name: Setup Node and NPM Cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 #v5.0.0
         with:
           node-version-file: .nvmrc
           cache: 'npm'
       # NPM Authenticate
       - name: Auth for github registry
         run: |
-          npm config set //npm.pkg.github.com/:_authToken=$REGISTRY_TOKEN
-        env:
-          REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          npm config set //npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}
       # install dependencies
       - name: Install
         run: HUSKY=0 npm ci  --include=optional
@@ -82,7 +76,10 @@ jobs:
         run: |
           git config user.email "actions@github.com"
           git config user.name "Github Actions"
+          git remote set-url origin https://x-access-token:${GH_TOKEN}@github.com/shiftcode/sc-ng-commons-public.git
           npx publish-lib
         env:
           GITHUB_CONTEXT: ${{ toJson(github) }}
-          GH_TOKEN: ${{ secrets.GH_TOKEN_PUBLIC_REPO }} # necessary for publish-libs script
+          # necessary to commit on protected branch after merging
+          # and to run actions after version-bump commit (otherwise we can't create rules for merging as no workflows run after GITHUB_TOKEN commits)
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}

.husky/pre-commit

@@ -1 +1 @@
-npx lerna exec --concurrency 1 --stream lint-staged && npx lint-staged
+npx lint-staged

.nvmrc

@@ -1 +1 @@
-lts/jod
+lts/krypton

README.md

@@ -1,5 +1,9 @@
 # sc-ng-commons-public
 
+> 🎯\
+> Target runtime: [Node >=24](https://node.green/#ES2023) and [modern Browsers](https://caniuse.com/?search=es2023) + Firefox ESR\
+> Target lib: es2022 + ES2023.Array
+
 Public Angular libraries used in various shiftcode projects.
 
 > [![@shiftcode/ngx-core](https://img.shields.io/github/package-json/v/shiftcode/sc-ng-commons-public?filename=%2Flibs%2Fcore%2Fpackage.json&label=%40shiftcode%2Fngx-core)](libs/core)\
@@ -21,7 +25,7 @@ Shows the mapping between the angular version and our lib versions.
 
 | Angular Version | Lib Version                   |
 | --------------- | ----------------------------- |
-| `^21`           | `^13`                         |
+| `^21`           | `^13 \|\| ^14 \|\| ^15`       |
 | `^20`           | `^11 \|\| ^12`                |
 | `^19`           | `^7 \|\| ^8 \|\| ^9 \|\| ^10` |
 | `^18`           | `^6`                          |

angular.json

@@ -18,15 +18,16 @@
           "configurations": {
             "production": {
               "tsConfig": "libs/core/tsconfig.lib.prod.json"
-            }
+            },
+            "development": {}
           },
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:jest",
+          "builder": "@angular/build:unit-test",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "polyfills": ["zone.js", "zone.js/testing"]
+            "runner": "vitest"
           }
         }
       }
@@ -46,15 +47,16 @@
           "configurations": {
             "production": {
               "tsConfig": "libs/components/tsconfig.lib.prod.json"
-            }
+            },
+            "development": {}
           },
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:jest",
+          "builder": "@angular/build:unit-test",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "polyfills": ["zone.js", "zone.js/testing"]
+            "runner": "vitest"
           }
         }
       }

apps/styleguide/eslint-suppressions.json

@@ -0,0 +1 @@
+{}

apps/styleguide/lint-staged.config.js

@@ -0,0 +1,10 @@
+/**
+ * @see https://github.com/lint-staged/lint-staged?tab=readme-ov-file#typescript
+ * @type  { import('lint-staged').Configuration }
+ */
+const config = {
+  'package.json': ['npx sort-package-json'],
+  '*': ['eslint --fix --cache', 'npx prettier --write --ignore-unknown'],
+}
+
+export default config

apps/styleguide/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@shiftcode/styleguide",
+  "version": "15.0.0-pr7.1",
   "private": true,
+  "type": "module",
   "scripts": {
     "lint": "eslint --fix --cache ./src",
     "lint:ci": "eslint ./src",
     "lint:staged": "eslint --fix --cache"
-  },
-  "version": "14.0.0"
+  }
 }

commitlint.config.js

@@ -0,0 +1,12 @@
+/**
+ * @see https://commitlint.js.org/reference/configuration.html
+ * @type { import('@commitlint/types').UserConfig }
+ */
+const config = {
+  extends: ['@commitlint/config-angular'],
+  rules: {
+    'header-max-length': [2, 'always', 100],
+  },
+}
+
+export default config

lerna.json

@@ -1,11 +1,13 @@
 {
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "packages": ["libs/*", "apps/*"],
-  "version": "14.0.0",
+  "version": "15.0.0-pr7.1",
   "command": {
     "version": {
       "allowBranch": "*",
-      "message": "build(release): next version [skip_build]"
+      "message": "build(release): next version [skip_build]",
+      "forcePublish": true
     },
     "publish": {
       "contents": "./dist"

libs/components/README.md

@@ -1,5 +1,9 @@
 # @shiftcode/ngx-components
 
+> 🎯\
+> Target runtime: [Node >=24](https://node.green/#ES2023) and [modern Browsers](https://caniuse.com/?search=es2023) + Firefox ESR\
+> Target lib: es2022 + ES2023.Array
+
 Contains angular components and directives which are usable across different projects.
 
 All components use `changeDetection: ChangeDetectionStrategy.OnPush`

libs/components/lint-staged.config.js

@@ -0,0 +1,10 @@
+/**
+ * @see https://github.com/lint-staged/lint-staged?tab=readme-ov-file#typescript
+ * @type  { import('lint-staged').Configuration }
+ */
+const config = {
+  'package.json': ['npx sort-package-json'],
+  '*': ['eslint --fix --cache', 'npx prettier --write --ignore-unknown'],
+}
+
+export default config

libs/components/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "14.0.0",
+  "version": "15.0.0-pr7.1",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <team@shiftcode.ch>",
   "sideEffects": false,
-  "scripts": {
-    "lint": "eslint --fix --cache ./src",
-    "lint:ci": "eslint ./src",
-    "lint:staged": "eslint --fix --cache"
-  },
+  "type": "module",
   "dependencies": {
     "tslib": "^2.5.0"
   },
@@ -20,8 +16,11 @@
     "@angular/core": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@shiftcode/logger": "^4.0.0 || ^4.0.0-pr250",
-    "@shiftcode/ngx-core": "^14.0.0 || ^14.0.0-pr76",
+    "@shiftcode/logger": "^5.0.0",
+    "@shiftcode/ngx-core": "^15.0.0 || ^15.0.0-pr7",
     "rxjs": "^6.5.3 || ^7.4.0"
+  },
+  "engines": {
+    "node": "^24.0.0"
   }
 }

libs/components/src/lib/svg/svg-registry.service.spec.ts

@@ -0,0 +1,74 @@
+import { provideHttpClient } from '@angular/common/http'
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'
+import { DOCUMENT } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { beforeEach, describe, expect, test } from 'vitest'
+
+import { SvgRegistry } from './svg-registry.service'
+
+const MOCK_SVG = '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5"/></svg>'
+const MOCK_SVG_URL = '/assets/icon.svg'
+
+describe('SvgRegistry', () => {
+  let service: SvgRegistry
+  let httpMock: HttpTestingController
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    })
+    service = TestBed.inject(SvgRegistry)
+    httpMock = TestBed.inject(HttpTestingController)
+  })
+
+  describe('createSvgElementFromString', () => {
+    test('creates an SVGElement with default attributes', () => {
+      const doc = TestBed.inject(DOCUMENT)
+      const svg = SvgRegistry.createSvgElementFromString(MOCK_SVG, doc)
+
+      expect(svg).toBeInstanceOf(SVGElement)
+      expect(svg.getAttribute('fit')).toBe('')
+      expect(svg.getAttribute('height')).toBe('100%')
+      expect(svg.getAttribute('width')).toBe('100%')
+      expect(svg.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet')
+      expect(svg.getAttribute('focusable')).toBe('false')
+    })
+
+    test('removes style tags from svg', () => {
+      const doc = TestBed.inject(DOCUMENT)
+      const svgWithStyle = '<svg><style>.cls { fill: red; }</style><circle cx="10" cy="10" r="5"/></svg>'
+      const svg = SvgRegistry.createSvgElementFromString(svgWithStyle, doc)
+
+      expect(svg.querySelectorAll('style').length).toBe(0)
+      expect(svg.querySelector('circle')).toBeTruthy()
+    })
+
+    test('throws when no svg element found', () => {
+      const doc = TestBed.inject(DOCUMENT)
+      expect(() => SvgRegistry.createSvgElementFromString('<div>not svg</div>', doc)).toThrow('Could not find svg')
+    })
+  })
+
+  describe('getFromUrl', () => {
+    test('fetches svg from url and returns an SVGElement', async () => {
+      const promise = service.getFromUrl(MOCK_SVG_URL)
+      httpMock.expectOne(MOCK_SVG_URL).flush(MOCK_SVG)
+
+      const svg = await promise
+      expect(svg).toBeInstanceOf(SVGElement)
+      expect(svg.getAttribute('height')).toBe('100%')
+      httpMock.verify()
+    })
+
+    test('caches the request and returns a clone on subsequent calls', async () => {
+      const promise1 = service.getFromUrl(MOCK_SVG_URL)
+      const promise2 = service.getFromUrl(MOCK_SVG_URL)
+      httpMock.expectOne(MOCK_SVG_URL).flush(MOCK_SVG)
+
+      const [svg1, svg2] = await Promise.all([promise1, promise2])
+      expect(svg1).not.toBe(svg2)
+      expect(svg1.outerHTML).toBe(svg2.outerHTML)
+      httpMock.verify()
+    })
+  })
+})

libs/components/src/lib/tooltip/tooltip.directive.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @angular-eslint/no-input-rename */
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y'
 import { ESCAPE } from '@angular/cdk/keycodes'
 import {
@@ -53,14 +54,13 @@ function transformMessage(value: string | number | null | undefined): string {
 export class TooltipDirective implements OnDestroy {
   readonly #opts: TooltipOptions = { ...defaultTooltipOptions, ...inject(TOOLTIP_DEFAULT_OPTIONS, { optional: true }) }
 
-  /** Disables the display of the tooltip. */
-  readonly disabled = input(false, { transform: booleanAttribute })
-
   /** The message to be displayed in the tooltip */
   readonly message = input('', { alias: 'scTooltip', transform: transformMessage })
 
+  /** Disables the display of the tooltip. */
+  readonly disabled = input(false, { alias: 'scTooltipDisabled', transform: booleanAttribute })
+
   /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
-  /* eslint-disable @angular-eslint/no-input-rename */
   readonly tooltipClass = input<string | string[] | Set<string> | { [key: string]: any }>('', {
     alias: 'scTooltipClass',
   })

libs/components/tsconfig.lint.json

@@ -1,10 +1,12 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": ".",
     "paths": {
       "@shiftcode/ngx-core": ["../core/src/public-api.ts"]
     },
-    "types": ["jest", "node"]
-  }
+    "types": ["node"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": []
 }

libs/components/tsconfig.spec.json

@@ -1,6 +1,9 @@
 {
   "extends": "../../tsconfig.spec.json",
   "compilerOptions": {
-    "types": ["jest", "node"]
+    "paths": {
+      "@shiftcode/ngx-core": ["../core/src/public-api.ts"]
+    },
+    "types": ["node"]
   }
 }