Update to Angular 21

.github/workflows/main.yml

@@ -5,15 +5,15 @@ name: lf-ui-components-CI
 
 on:
   push:
-    branches: [ '\d+.x' ]
+    branches: ['\d+.x']
   pull_request:
-    branches: [ '\d+.x' ]
+    branches: ['\d+.x']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 env:
-  NPM_VERSION: "18.0.6"
+  NPM_VERSION: "21.0.0"
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -26,24 +26,27 @@ jobs:
   build:
     runs-on: macos-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ github.sha }}
 
       - name: Echo build number
         run: echo ${{github.run_id}}
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '20'
-      
+          node-version: "24"
+
       - name: Update npm
         run: npm install -g npm@latest
 
       - name: npm ci
         run: npm ci
 
+      - name: Npm run format:check
+        run: npm run format:check
+
       - name: Npm run lint
         run: npm run lint
 
@@ -65,11 +68,8 @@ jobs:
       - name: Npm run sass-ms
         run: npm run sass-ms
 
-      - name: 'concatenate runtime.js, main.js, and polyfills.js into lf-documentation.js'
-        run: npm run concat-lf-documentation
-
-      - name: 'remove main.js, polyfills.js and runtime.js'
-        run: rm ./dist/lf-documentation/main.js ./dist/lf-documentation/polyfills.js ./dist/lf-documentation/runtime.js
+      - name: Install Playwright browser
+        run: npx playwright install chromium
 
       - name: Npm run test
         shell: pwsh
@@ -80,57 +80,55 @@ jobs:
         if: always()
         with:
           name: Jest Test Results
-          path: ./**/TESTS*.xml
+          path: ./test-results.xml
           reporter: java-junit
-          only-summary: 'true'
-          use-actions-summary: 'true'
-          fail-on-error: 'false'
+          only-summary: "true"
+          use-actions-summary: "true"
+          fail-on-error: "false"
 
-      - name: 'create an empty ./dist/ui-components/cdn folder'
-        run: 'mkdir -p ./dist/ui-components/cdn'
+      - name: "create an empty ./dist/ui-components/cdn folder"
+        run: "mkdir -p ./dist/ui-components/cdn"
 
-      - name: 'npm run gulp-replace-scripts-in-index-html'
-        run: npm run gulp-replace-scripts-in-index-html
-
-      - name: 'npm run gulp-replace-placeholders-in-documentation'
+      - name: "npm run gulp-replace-placeholders-in-documentation"
         run: npm run gulp-replace-placeholders-in-documentation
 
-      - name: 'move indigo-pink to ui-components/cdn'
+      - name: "move indigo-pink to ui-components/cdn"
         run: cp ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ./dist/ui-components/cdn/indigo-pink.css
 
-      - name: 'move lf-ui-components.js to ui-components/cdn'
-        run: mv lf-ui-components.js main.js.map runtime.js.map polyfills.js.map ../ui-components/cdn
-        working-directory: ./dist/lf-cdn
+      - name: "move lf-ui-components.js to ui-components/cdn"
+        run: |
+          mv lf-ui-components.js lf-ui-components.js.map ../../ui-components/cdn
+        working-directory: ./dist/lf-cdn/browser
 
-      - name: 'Append flatpickr.min.css to lf-laserfiche-lite.css'
+      - name: "Append flatpickr.min.css to lf-laserfiche-lite.css"
         run: |
-          echo "/*" >> ./dist/lf-documentation/lf-laserfiche-lite.css
-          cat LICENSE >> ./dist/lf-documentation/lf-laserfiche-lite.css
-          echo "The following styles are copied from flatpickr.min.css */" >> ./dist/lf-documentation/lf-laserfiche-lite.css
-          cat ./node_modules/flatpickr/dist/flatpickr.min.css >> ./dist/lf-documentation/lf-laserfiche-lite.css
+          echo "/*" >> ./dist/lf-documentation/browser/lf-laserfiche-lite.css
+          cat LICENSE >> ./dist/lf-documentation/browser/lf-laserfiche-lite.css
+          echo "The following styles are copied from flatpickr.min.css */" >> ./dist/lf-documentation/browser/lf-laserfiche-lite.css
+          cat ./node_modules/flatpickr/dist/flatpickr.min.css >> ./dist/lf-documentation/browser/lf-laserfiche-lite.css
 
-      - name: 'Append flatpickr.min.css to lf-ms-office-lite.css'
+      - name: "Append flatpickr.min.css to lf-ms-office-lite.css"
         run: |
-            echo "/*" >> ./dist/lf-documentation/lf-ms-office-lite.css
-            cat LICENSE >> ./dist/lf-documentation/lf-ms-office-lite.css
-            echo "The following styles are copied from flatpickr.min.css */" >> ./dist/lf-documentation/lf-ms-office-lite.css
-            cat ./node_modules/flatpickr/dist/flatpickr.min.css >> ./dist/lf-documentation/lf-ms-office-lite.css
+          echo "/*" >> ./dist/lf-documentation/browser/lf-ms-office-lite.css
+          cat LICENSE >> ./dist/lf-documentation/browser/lf-ms-office-lite.css
+          echo "The following styles are copied from flatpickr.min.css */" >> ./dist/lf-documentation/browser/lf-ms-office-lite.css
+          cat ./node_modules/flatpickr/dist/flatpickr.min.css >> ./dist/lf-documentation/browser/lf-ms-office-lite.css
 
-      - name: 'move lf-documentation/styles to ui-components/cdn'
-        run: mv lf-laserfiche-lite.css lf-ms-office-lite.css lf-laserfiche-lite.css.map lf-ms-office-lite.css.map ../ui-components/cdn/
-        working-directory: ./dist/lf-documentation
+      - name: "move lf-documentation/styles to ui-components/cdn"
+        run: mv lf-laserfiche-lite.css lf-ms-office-lite.css lf-laserfiche-lite.css.map lf-ms-office-lite.css.map ../../ui-components/cdn/
+        working-directory: ./dist/lf-documentation/browser
 
-      - name: 'move README to ui-components'
+      - name: "move README to ui-components"
         run: mv README.md ./dist/ui-components
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: npm-publish-artifact
           # A file, directory or wildcard pattern that describes what to upload
           path: |
             ./dist/ui-components
-            ./dist/lf-documentation
+            ./dist/lf-documentation/browser
             ./types-lf-ui-components-publish/index.d.ts
             ./types-lf-ui-components-publish/index.js
 
@@ -141,30 +139,30 @@ jobs:
     runs-on: ubuntu-latest
     environment: npm_publish
     if: ${{ github.run_attempt != 1 }}
-    needs: [ build ]
+    needs: [build]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ github.sha }}
 
       - name: Download a Build Artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: npm-publish-artifact
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-          
+          node-version: "24"
+          registry-url: "https://registry.npmjs.org"
+
       - name: Update npm
         run: npm install -g npm@latest
-        
+
       - name: set NpmPackageVersion environment
         run: echo "NpmPackageVersion=${{ env.NPM_VERSION }}--preview-${{ github.run_id }}" >> $GITHUB_ENV
 
-      - name: 'copy license'
+      - name: "copy license"
         run: |
           cp LICENSE ./types-lf-ui-components-publish
           cp LICENSE ./dist/ui-components
@@ -192,32 +190,31 @@ jobs:
           commit_sha: ${{ github.sha }}
           message: Workflow run ${{github.server_url}}/${{github.repository}}/actions/runs/${{ github.run_id}}
 
-
   publish_to_npm_release:
     runs-on: ubuntu-latest
     environment: npm_publish
     if: ${{ github.run_attempt != 1 }}
-    needs: [ build ]
+    needs: [build]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ github.sha }}
 
       - name: Download a Build Artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: npm-publish-artifact
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-          
+          node-version: "24"
+          registry-url: "https://registry.npmjs.org"
+
       - name: Update npm
         run: npm install -g npm@latest
-        
-      - name: 'copy license'
+
+      - name: "copy license"
         run: |
           cp LICENSE ./types-lf-ui-components-publish
           cp LICENSE ./dist/ui-components
@@ -248,36 +245,36 @@ jobs:
   publish_documentation:
     runs-on: ubuntu-latest
     if: ${{ github.run_attempt != 1 }}
-    needs: [ build ]
+    needs: [build]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ github.sha }}
 
       - name: Download a Build Artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: npm-publish-artifact
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "24"
+          registry-url: "https://registry.npmjs.org"
 
       - name: Npm install gulp
         run: npm install gulp
 
-      - name: 'gulp replaceVersionInDocumentation'
+      - name: "gulp replaceVersionInDocumentation"
         run: gulp replaceVersionInDocumentation --npmVersion ${{ env.NPM_VERSION }}
 
-      - name: 'gulp replaceVersionInIndexHtml'
+      - name: "gulp replaceVersionInIndexHtml"
         run: gulp replaceVersionInIndexHtml --npmVersion ${{ env.NPM_VERSION }}
 
       - name: Upload pages artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v4
         with:
-          path: ./dist/lf-documentation
+          path: ./dist/lf-documentation/browser
 
       - name: Deploy to GitHub Pages
         id: deployment