fix(ci): update lighthouse appLoc

- resolve HOT v17 render loops caused by unstable settings bind
- tests: pin locale to en-GB
- improve accessibility
- improve initial bundle size, split and lazy-load feature modules

Reviewed-on: #245
Co-authored-by: s <sead@4gl.io>
Co-committed-by: s <sead@4gl.io>

.gitea/workflows/build.yaml

@@ -2,39 +2,53 @@ name: Build
 run-name: Running Lint Check and Licence checker on Pull Request
 on: [pull_request]
 
+env:
+  NODE_VERSION: '24.15.0'
+
 jobs:
   Build-and-ng-test:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Google Chrome
         run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
           apt-get update
-          apt-get install -y google-chrome-stable xvfb
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
 
       - name: Write .npmrc file
-        run: echo "$NPMRC" > client/.npmrc
+        run: echo "$NPMRC" >> client/.npmrc
         shell: bash
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - name: Lint check
-        run: npm run lint:check
-
       - name: Install dependencies
         run: |
           cd client
           # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
+      - name: Check audit
+        # Audit should fail and stop the CI if critical vulnerability found
+        run: |
+          npm audit --audit-level=critical --omit=dev
+          cd ./sas
+          npm audit --audit-level=critical --omit=dev
+          cd ../client
+          npm audit --audit-level=critical --omit=dev
+
+      - name: Lint check
+        run: npm run lint:check
+
       - name: Licence checker
         run: |
           cd client
@@ -52,26 +66,33 @@ jobs:
 
   Build-and-test-development:
     runs-on: ubuntu-latest
-    needs: Build-production-and-ng-test
+    needs: Build-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
           touch client/.npmrc
           echo '${{ secrets.NPMRC}}' > client/.npmrc
 
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -86,17 +107,18 @@ jobs:
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready
 
       - name: Deploy mocked services
         run: |
@@ -106,12 +128,8 @@ jobs:
           sasjs cbd -t server-ci
           # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
 
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
       - name: Prepare and run frontend and cypress
+        timeout-minutes: 35
         run: |
           cd ./client
           mv ./cypress.env.example.json ./cypress.env.json
@@ -126,11 +144,14 @@ jobs:
           replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
           cat ./cypress.config.ts
           # Start frontend and run cypress
-          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          # timeout 1800: SIGTERM after 30 min so Cypress can flush video/screenshots
+          # before the outer timeout-minutes hard-kills the step (avoids silent multi-hour hangs)
+          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && timeout 1800 npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
 
       - name: Zip Cypress videos
         if: always()
         run: |
+          mkdir -p ./client/cypress/videos
           zip -r cypress-videos ./client/cypress/videos
 
       - name: Add cypress videos artifacts

.gitea/workflows/lighthouse.yaml

@@ -2,38 +2,31 @@ name: Lighthouse Checks
 run-name: Running Lighthouse Performance and Accessibility Checks on Pull Request
 on: [pull_request]
 
+env:
+  NODE_VERSION: '24.15.0'
+
 jobs:
   lighthouse:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [24.5.0]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Google Chrome
         run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
           apt-get update
-          apt-get install -y google-chrome-stable xvfb
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
 
-      - name: Install pm2 for process management
-        run: npm i -g pm2
+      - name: Install global packages
+        run: npm i -g pm2 @sasjs/cli wait-on
 
-      - name: Install @sasjs/cli
-        run: npm i -g @sasjs/cli
-
-      - name: Install wait-on globally
-        run: npm install -g wait-on
-
-      - name: Create .env file for sasjs/server
+      - name: Setup and start SASjs server
         run: |
           touch .env
           echo RUN_TIMES=js >> .env
@@ -41,15 +34,9 @@ jobs:
           echo CORS=enable >> .env
           echo WHITELIST=http://localhost:4200 >> .env
           cat .env
-
-      - name: Download sasjs/server package from github using curl
-        run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-
-      - name: Unzip downloaded package
-        run: unzip linux.zip
-
-      - name: Run sasjs server
-        run: pm2 start api-linux --wait-ready
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          pm2 start api-linux --wait-ready
 
       - name: Write .npmrc file
         run: echo "$NPMRC" > client/.npmrc
@@ -61,14 +48,17 @@ jobs:
         run: |
           cd client
           # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
           npm ci
           npm install -g replace-in-files-cli
 
       - name: Update appLoc in index.html
         run: |
           cd client
-          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/proj/sasjs/genesis-mocks"' ./src/index.html
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
 
       - name: Build Frontend
         run: |

.gitea/workflows/release.yaml

@@ -5,15 +5,20 @@ on:
     branches:
       - main
 
+env:
+  NODE_VERSION: '24.5.0'
+
 jobs:
   Build-production-and-ng-test:
     runs-on: ubuntu-latest
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
@@ -24,8 +29,7 @@ jobs:
         run: |
           apt-get update
           wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-          apt install -y ./google-chrome*.deb;
-          export CHROME_BIN=/usr/bin/google-chrome
+          apt install -y ./google-chrome*.deb
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -43,9 +47,9 @@ jobs:
       - name: Check audit
         # Audit should fail and stop the CI if critical vulnerability found
         run: |
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
           cd ./sas
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
           cd ../client
           npm audit --audit-level=critical --omit=dev
 
@@ -63,25 +67,32 @@ jobs:
   Build-and-test-development:
     runs-on: ubuntu-latest
     needs: Build-production-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
           touch client/.npmrc
           echo '${{ secrets.NPMRC}}' > client/.npmrc
 
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8
 
       - name: Write cypress credentials
         run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -96,17 +107,18 @@ jobs:
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
           npm ci
 
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready
 
       - name: Deploy mocked services
         run: |
@@ -116,11 +128,6 @@ jobs:
           sasjs cbd -t server-ci
           # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
 
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
       - name: Prepare and run frontend and cypress
         run: |
           cd ./client
@@ -141,6 +148,7 @@ jobs:
       - name: Zip Cypress videos
         if: always()
         run: |
+          mkdir -p ./client/cypress/videos
           zip -r cypress-videos ./client/cypress/videos
 
       - name: Add cypress videos artifacts
@@ -155,10 +163,10 @@ jobs:
     needs: [Build-production-and-ng-test, Build-and-test-development]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.5.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Write .npmrc file
         run: |
@@ -168,17 +176,11 @@ jobs:
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - name: Install packages
+      - name: Install system packages
         run: |
           apt-get update
-          apt-get install zip -y
-          # sasjs cli is used to compile & build the SAS services
+          apt-get install -y zip jq doxygen
           npm i -g @sasjs/cli
-          # jq is used to parse the release JSON
-          apt-get install jq -y
-          # doxygen is used for the SASJS docs
-          apt-get update
-          apt-get install doxygen -y
 
       - name: Frontend Preliminary Build
         description: We want to prevent creating empty release if frontend fails

.npmrc

@@ -1 +1,4 @@
 legacy-peer-deps=true
+ignore-scripts=true
+save-exact=true
+fund=false

CHANGELOG.md

@@ -1,3 +1,108 @@
+## [7.8.2](https://git.datacontroller.io/dc/dc/compare/v7.8.1...v7.8.2) (2026-05-20)
+
+
+### Bug Fixes
+
+* bumping ws package ([2382a55](https://git.datacontroller.io/dc/dc/commit/2382a559a5ac32b0f815776a90207650d5809ba6))
+* enabling version restore for non admin users ([5d889d8](https://git.datacontroller.io/dc/dc/commit/5d889d824cc2f8e4ea089cbb578453125dc4ba6c))
+
+## [7.8.1](https://git.datacontroller.io/dc/dc/compare/v7.8.0...v7.8.1) (2026-05-15)
+
+
+### Bug Fixes
+
+* **sasjs:** enable runAsTask ([f1a26e1](https://git.datacontroller.io/dc/dc/commit/f1a26e132eba7fa2ac64754940b52ea46c6619b3))
+
+# [7.8.0](https://git.datacontroller.io/dc/dc/compare/v7.7.3...v7.8.0) (2026-05-15)
+
+
+### Bug Fixes
+
+* enabling DSN=*ALL* in MPE_SECURITY ([7d94cb2](https://git.datacontroller.io/dc/dc/commit/7d94cb2ae4a3f6c1fa1011ae0fced7083a2f2793))
+* providing default values for RULE_ACTIVE on MPE_VALIDATIONS ([f031b4e](https://git.datacontroller.io/dc/dc/commit/f031b4eb8925397e60dcc739a721cfbbb6da8dff))
+* switch away from api usage for CASLIB metadata ([ce921a0](https://git.datacontroller.io/dc/dc/commit/ce921a032a8970b8078a463a41da884e1fa71bc3))
+* use correct debug param for runAsTask ([bb80476](https://git.datacontroller.io/dc/dc/commit/bb8047676749814d3b86eea666726dbe4bf5f270))
+
+
+### Features
+
+* add runAsTask config attribute parser ([1635bc9](https://git.datacontroller.io/dc/dc/commit/1635bc9c451bc221f386241007f594096f114b4f))
+* enabling *ALL* option by default in MPE_SECURITY (DSN col) ([93d4ab6](https://git.datacontroller.io/dc/dc/commit/93d4ab65acce7b5b35e448146f9893964ad2cca3))
+
+## [7.7.3](https://git.datacontroller.io/dc/dc/compare/v7.7.2...v7.7.3) (2026-05-12)
+
+
+### Bug Fixes
+
+* move cas session assign to settings.sas and abort when lib is unassigned ([65f0b97](https://git.datacontroller.io/dc/dc/commit/65f0b979a401277b3e070d409659ae3fae2ff8c0))
+
+## [7.7.2](https://git.datacontroller.io/dc/dc/compare/v7.7.1...v7.7.2) (2026-05-07)
+
+
+### Bug Fixes
+
+* **client:** bundle Metropolis font locally to satisfy CSP ([9546fcd](https://git.datacontroller.io/dc/dc/commit/9546fcd6312f3e81f746ef6e32ef398810ed434a))
+* **client:** clear angular build cache on font strip to avoid stale dist ([503cb08](https://git.datacontroller.io/dc/dc/commit/503cb08b2fa40397434189f9c20eff3358eb7010))
+* **client:** postinstall removal of Metropolis [@font-face](https://git.datacontroller.io/font-face) from @clr/ui ([e6397ce](https://git.datacontroller.io/dc/dc/commit/e6397cecc13afe2a9238bdfb2b4b9b81f38d055c))
+* **client:** serve text-security-disc font locally ([80ce80e](https://git.datacontroller.io/dc/dc/commit/80ce80ece40012e59c7cd0340b4aa9a9aca46443))
+* **editor:** preserve numeric type for SAS num cols with static SOFTSELECT/HARDSELECT ([05a3289](https://git.datacontroller.io/dc/dc/commit/05a328976ea3d1d6ef7559850369aa580f0d067f))
+
+## [7.7.1](https://git.datacontroller.io/dc/dc/compare/v7.7.0...v7.7.1) (2026-05-05)
+
+
+### Bug Fixes
+
+* **client:** bump adapter ([d26f7d2](https://git.datacontroller.io/dc/dc/commit/d26f7d2511008634124c7d6fde115abb43db9c43))
+* **sas:** bump cli ([d60029d](https://git.datacontroller.io/dc/dc/commit/d60029deae0ec21f3b8570461e2a4ca041d58f72))
+
+# [7.7.0](https://git.datacontroller.io/dc/dc/compare/v7.6.0...v7.7.0) (2026-05-04)
+
+
+### Bug Fixes
+
+* bump adapter to 4.16.6 ([1707f38](https://git.datacontroller.io/dc/dc/commit/1707f3802a97de8c659f1a88c92fc917e8a30615))
+* remove data:image/svg+xml CSP violation, use class instead changing style directly ([d66eb5d](https://git.datacontroller.io/dc/dc/commit/d66eb5dfc2dbb01f1e6c0c7d15fc2ad2a39dd829))
+* remove WORK, SASUSER and CASUSER as library options.  [#224](https://git.datacontroller.io/dc/dc/issues/224) ([ec66631](https://git.datacontroller.io/dc/dc/commit/ec66631a33aabb8ab2f92fe22c15440127085782))
+
+
+### Features
+
+* auto-save CAS tables [#224](https://git.datacontroller.io/dc/dc/issues/224) ([40d04a5](https://git.datacontroller.io/dc/dc/commit/40d04a53c4c00183116bdbd08397e0f2ffb1f578))
+* autoload CAS tables. [#224](https://git.datacontroller.io/dc/dc/issues/224) ([d5ebb01](https://git.datacontroller.io/dc/dc/commit/d5ebb01ce381f5f4ec06de041f3ab9e632c02e43))
+
+# [7.6.0](https://git.datacontroller.io/dc/dc/compare/v7.5.0...v7.6.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add label and tooltip for libref download, sanitise input ([52d5803](https://git.datacontroller.io/dc/dc/commit/52d58036a40e25847e900f9b04a77dbcc409c12b))
+
+
+### Features
+
+* configurable email alerts.  Closes [#217](https://git.datacontroller.io/dc/dc/issues/217) ([2ccf0d1](https://git.datacontroller.io/dc/dc/commit/2ccf0d11000129629a0665421135b7530af9892f))
+
+# [7.5.0](https://git.datacontroller.io/dc/dc/compare/v7.4.1...v7.5.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add workflow audits, update deps ([66e98a9](https://git.datacontroller.io/dc/dc/commit/66e98a96cbd092e762b94a04660f8e17ca003ceb))
+* allow CSV uploads with licence row limit ([5b260e4](https://git.datacontroller.io/dc/dc/commit/5b260e49153dd85bc0023ad94d8a5f57b8ffa6dc)), closes [#213](https://git.datacontroller.io/dc/dc/issues/213)
+* bumping cli and pinning versions in .npmrc ([80039f4](https://git.datacontroller.io/dc/dc/commit/80039f4876c8e09dc477678e1eff58329094c9e9))
+* guard CSV upload with fileUpload licence flag ([ed40df6](https://git.datacontroller.io/dc/dc/commit/ed40df62953c3055770b5cbf50738f4a48b943cd))
+* parse embed param from window.location.hash for hash router compatibility ([0269c24](https://git.datacontroller.io/dc/dc/commit/0269c2421db245f7f5405678605cb4d4587e2a67))
+* quote CSV char values.  Closes [#215](https://git.datacontroller.io/dc/dc/issues/215) ([d9980e8](https://git.datacontroller.io/dc/dc/commit/d9980e866d1a2fe7a731ff279d73accd35003e67))
+* resolve outer promise in parseCsvFile for non-WLATIN1 path ([4ee15e1](https://git.datacontroller.io/dc/dc/commit/4ee15e1b6e83f27f279fc345e6998452a8f64d7e))
+* use XLSX for CSV row truncation to handle new lines in values ([6d590c0](https://git.datacontroller.io/dc/dc/commit/6d590c050dcd593a73464fae5604f774f016b10d))
+
+
+### Features
+
+* add embed URL parameter to hide header and back button ([b0dc441](https://git.datacontroller.io/dc/dc/commit/b0dc441d681369e06eee58288dbdbb236f930bdc)), closes [#214](https://git.datacontroller.io/dc/dc/issues/214)
+* add target libref input to config download ([a89657b](https://git.datacontroller.io/dc/dc/commit/a89657b0b81b9c531f64c0dda2714b4eb16c4bc9)), closes [#212](https://git.datacontroller.io/dc/dc/issues/212)
+* export config service to allow dclib swapping.  Closes [#212](https://git.datacontroller.io/dc/dc/issues/212) ([326c26f](https://git.datacontroller.io/dc/dc/commit/326c26fddfa88a0dc4ca79d3bd0c77c4d807f37c))
+
 ## [7.4.1](https://git.datacontroller.io/dc/dc/compare/v7.4.0...v7.4.1) (2026-03-12)
 
 

README.md

@@ -51,7 +51,7 @@ This project includes automated Lighthouse performance and accessibility checks
 The Lighthouse CI workflow:
 1. Sets up the development environment with SASjs server and mocked services
 2. Builds and serves the Angular frontend
-3. Runs Lighthouse CI against key application pages
+3. Installs Chrome and runs `lhci autorun` (Lighthouse CI) against key pages
 4. Uploads results as artifacts for review
 
 To run Lighthouse checks locally:
@@ -61,4 +61,4 @@ npm install
 npm run lighthouse
 ```
 
-Configuration is in `client/lighthouserc.js`.
+Configuration is in `client/lighthouserc.js` (URL list, `desktop` preset, Chrome flags, assertions).

client/angular.json

@@ -25,6 +25,7 @@
           "options": {
             "allowedCommonJsDependencies": [
               "handsontable",
+              "exceljs",
               "core-js",
               "pikaday",
               "querystring",
@@ -62,7 +63,8 @@
               {
                 "glob": "**/*",
                 "input": "src/images",
-                "output": "images"
+                "output": "images",
+                "ignore": ["spinner.svg", "caret.svg"]
               }
             ],
             "styles": ["src/styles.scss"],

client/cypress.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  reporter: "mochawesome",
+  reporter: 'mochawesome',
 
   reporterOptions: {
-    reportDir: "cypress/results",
+    reportDir: 'cypress/results',
     overwrite: false,
     html: true,
-    json: false,
+    json: false
   },
   viewportHeight: 900,
   viewportWidth: 1600,
@@ -16,24 +16,32 @@ export default defineConfig({
   defaultCommandTimeout: 30000,
 
   env: {
-    hosturl: "http://localhost:4200",
-    appLocation: "",
-    site_id_SAS9: "70221618",
-    site_id_SASVIYA: "70253615",
-    site_id_SASJS: "123",
-    serverType: "SASJS",
-    libraryToOpenIncludes_SASVIYA: "viya",
-    libraryToOpenIncludes_SAS9: "dc",
-    libraryToOpenIncludes_SASJS: "dc",
+    hosturl: 'http://localhost:4200',
+    appLocation: '',
+    site_id_SAS9: '70221618',
+    site_id_SASVIYA: '70253615',
+    site_id_SASJS: '123',
+    serverType: 'SASJS',
+    libraryToOpenIncludes_SASVIYA: 'viya',
+    libraryToOpenIncludes_SAS9: 'dc',
+    libraryToOpenIncludes_SASJS: 'dc',
     debug: false,
     screenshotOnRunFailure: false,
     longerCommandTimeout: 50000,
-    testLicenceUserLimits: false,
+    testLicenceUserLimits: false
   },
 
   e2e: {
+    video: true,
     setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-  },
-});
+      // Pin the browser locale so locale-formatted cells (intl-date/time/datetime)
+      // render deterministically regardless of the runner's system locale.
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          launchOptions.args.push('--lang=en-GB')
+        }
+        return launchOptions
+      })
+    }
+  }
+})

client/cypress/e2e/excel.cy.ts

@@ -539,7 +539,9 @@ const checkResultOfFormulaUpload = (callback?: any) => {
 }
 
 const checkResultOfXLSUpload = (callback?: any) => {
-  cy.viewport(1280, 720)
+  // Config-default width — wide enough that the date/datetime/time columns are
+  // not virtualized away (the old 1280 width hid the trailing time columns).
+  cy.viewport(1600, 900)
   cy.get('#hotTable', { timeout: 30000 })
     .find('div.ht_master.handsontable')
     .find('div.wtHolder')
@@ -557,14 +559,15 @@ const checkResultOfXLSUpload = (callback?: any) => {
       expect(cell.innerText).to.equal('▼\nOption 1')
       cell = data[0].children[0].children[5]
       expect(cell.innerText).to.equal('42')
+      // Cells render locale-formatted (Cypress pins --lang=en-GB); stored value
+      // stays raw ISO. date -> dd/mm/yyyy, datetime -> dd/mm/yyyy, HH:mm:ss,
+      // time -> HH:mm:ss (en-GB 24h, identical to the raw ISO time).
       cell = data[0].children[0].children[6]
-      expect(cell.innerText).to.equal('▼\n1960-02-12')
-      // When CI detached browser screen is smaller, below cells are not visible so test fails
-      // Commenting it out now until we figure out workaround
-      // cell = data[0].children[0].children[7]
-      // expect(cell.innerText).to.equal('▼\n1960-01-01 00:00:42')
-      // cell = data[0].children[0].children[8]
-      // expect(cell.innerText).to.equal('00:00:42')
+      expect(cell.innerText).to.equal('12/02/1960')
+      cell = data[0].children[0].children[7]
+      expect(cell.innerText).to.equal('01/01/1960, 00:00:42')
+      cell = data[0].children[0].children[8]
+      expect(cell.innerText).to.equal('00:00:42')
 
       if (callback) callback()
     })

client/cypress/support/e2e.ts

@@ -20,4 +20,16 @@ import './commands'
 // require('./commands')
 
 import 'cypress-plugin-tab'
-import "cypress-real-events"
+import 'cypress-real-events'
+
+// Pin the locale
+Cypress.on('window:before:load', (win) => {
+  Object.defineProperty(win.navigator, 'language', {
+    value: 'en-GB',
+    configurable: true
+  })
+  Object.defineProperty(win.navigator, 'languages', {
+    value: ['en-GB'],
+    configurable: true
+  })
+})

client/licenseChecker.js

@@ -10,7 +10,7 @@ const check = (cwd) => {
         onlyAllow:
           'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
         excludePackages:
-          '@cds/city@1.1.0;@handsontable/angular-wrapper@16.0.1;handsontable@^16.0.1;handsontable@16.2.0;hyperformula@2.7.1;hyperformula@3.0.0;hyperformula@3.1.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1'
+          '@cds/city@1.1.0;@handsontable/angular-wrapper@16.0.1;@handsontable/angular-wrapper@17.1.0;handsontable@^16.0.1;handsontable@16.2.0;handsontable@17.1.0;hyperformula@2.7.1;hyperformula@3.0.0;hyperformula@3.1.0;hyperformula@3.2.0;hyperformula@3.3.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1;buffers@0.1.1'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -23,7 +23,7 @@
     "watch": "ng test watch=true",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor protractor.config.js",
-    "postinstall": "node ./src/version.ts && npm run add-githook",
+    "postinstall": "node ./src/version.ts && npm run add-githook && node ./scripts/strip-clr-base64-fonts.mjs && node ./scripts/gen-hot-icons.mjs",
     "add-githook": "[ -d ../.git ] && git config core.hooksPath ./.git-hooks || true",
     "cypress": "cypress open",
     "cy:run": "cypress run",
@@ -37,21 +37,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.18",
+    "@angular/animations": "^19.2.20",
     "@angular/cdk": "^19.2.19",
-    "@angular/common": "^19.2.18",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.2.18",
-    "@angular/platform-browser": "^19.2.18",
-    "@angular/platform-browser-dynamic": "^19.2.18",
-    "@angular/router": "^19.2.18",
+    "@angular/common": "^19.2.20",
+    "@angular/compiler": "^19.2.20",
+    "@angular/core": "^19.2.20",
+    "@angular/forms": "^19.2.20",
+    "@angular/platform-browser": "^19.2.20",
+    "@angular/platform-browser-dynamic": "^19.2.20",
+    "@angular/router": "^19.2.20",
     "@cds/core": "^6.15.1",
     "@clr/angular": "file:libraries/clr-angular-17.9.0.tgz",
     "@clr/icons": "^13.0.2",
     "@clr/ui": "file:libraries/clr-ui-17.9.0.tgz",
-    "@handsontable/angular-wrapper": "16.0.1",
-    "@sasjs/adapter": "^4.16.3",
+    "@handsontable/angular-wrapper": "^17.1.0",
+    "@sasjs/adapter": "^4.17.0",
     "@sasjs/utils": "^3.5.3",
     "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/d3-graphviz": "^2.6.7",
@@ -61,13 +61,14 @@
     "crypto-browserify": "^3.12.1",
     "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
+    "exceljs": "^4.4.0",
     "fs-extra": "^7.0.1",
-    "handsontable": "^16.0.1",
+    "handsontable": "^17.1.0",
     "https-browserify": "1.0.0",
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",
     "jquery-datetimepicker": "^2.5.21",
-    "jsrsasign": "^11.1.0",
+    "jsrsasign": "11.1.1",
     "marked": "^5.0.0",
     "moment": "^2.30.1",
     "ngx-clipboard": "^16.0.0",
@@ -86,18 +87,18 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.19",
+    "@angular-devkit/build-angular": "^19.2.24",
     "@angular-eslint/builder": "19.8.1",
     "@angular-eslint/eslint-plugin": "19.8.1",
     "@angular-eslint/eslint-plugin-template": "19.8.1",
     "@angular-eslint/schematics": "19.8.1",
     "@angular-eslint/template-parser": "19.8.1",
-    "@angular/cli": "^19.2.19",
-    "@angular/compiler-cli": "^19.2.18",
+    "@angular/cli": "^19.2.24",
+    "@angular/compiler-cli": "^19.2.20",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@compodoc/compodoc": "^1.1.21",
+    "@compodoc/compodoc": "^1.2.1",
     "@cypress/webpack-preprocessor": "^5.17.1",
-    "@lhci/cli": "^0.12.0",
+    "@lhci/cli": "^0.15.1",
     "@types/core-js": "^2.5.5",
     "@types/crypto-js": "^4.2.1",
     "@types/es6-shim": "^0.31.39",
@@ -105,15 +106,15 @@
     "@types/lodash-es": "^4.17.3",
     "@types/marked": "^4.3.0",
     "@types/node": "12.20.50",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "8.31.1",
+    "@typescript-eslint/parser": "8.31.1",
     "core-js": "^2.5.4",
-    "cypress": "12.17.1",
+    "cypress": "^15.14.2",
     "cypress-file-upload": "^5.0.8",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.8.1",
     "es6-shim": "^0.35.5",
-    "eslint": "^8.33.0",
+    "eslint": "8.57.1",
     "git-describe": "^4.0.4",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.3",
@@ -132,5 +133,10 @@
     "typescript": "~5.8.3",
     "wait-on": "^6.0.1",
     "watch": "^1.0.2"
+  },
+  "overrides": {
+    "ajv": "8.18.0",
+    "uuid": "11.1.1",
+    "lighthouse": "13.4.0"
   }
 }

client/scripts/gen-hot-icons.mjs

@@ -0,0 +1,69 @@
+import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from 'fs'
+import { resolve, join } from 'path'
+import { createRequire } from 'module'
+
+/**
+ * Generate static SVG assets + an SCSS partial that re-applies HOT v17 classic
+ * theme icons via real URLs (not data: URIs).
+ *
+ * Why: deployed app runs under CSP `img-src 'self'`. HOT v17's classic theme
+ * embeds icons as `data:image/svg+xml,...` in `-webkit-mask-image` rules, which
+ * the CSP blocks. We switch to `ht-theme-classic-no-icons.min.css` and re-add
+ * the icon rules pointing at same-origin SVG files emitted from this script.
+ *
+ * Inputs (HOT's own modules, so semantic names + selector list track upstream):
+ *   handsontable/themes/theme/classic                          → { classicTheme: { icons } }
+ *   handsontable/themes/static/variables/helpers/iconsMap      → iconsMap(icons, themePrefix)
+ *
+ * Outputs:
+ *   client/src/assets/hot-icons/<kebab-name>.svg
+ *   client/src/_hot-icons.scss
+ *
+ * Idempotent: clears the output dir and rewrites both outputs each run.
+ * Skips silently if handsontable isn't installed yet (pre-install runs).
+ */
+const require = createRequire(import.meta.url)
+
+const ASSETS_DIR = resolve('src/assets/hot-icons')
+const SCSS_OUT = resolve('src/_hot-icons.scss')
+const ASSET_URL_PREFIX = './assets/hot-icons/'
+
+const themePath = resolve('node_modules/handsontable/themes/theme/classic.js')
+const mapPath = resolve('node_modules/handsontable/themes/static/variables/helpers/iconsMap.js')
+
+if (!existsSync(themePath) || !existsSync(mapPath)) {
+  console.log('skip: handsontable theme modules not found (likely pre-install run)')
+  process.exit(0)
+}
+
+const { classicTheme } = require(themePath)
+const { iconsMap } = require(mapPath)
+
+const icons = classicTheme.icons
+const cssTemplate = iconsMap(icons, 'ht-theme-classic')
+
+const kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+rmSync(ASSETS_DIR, { recursive: true, force: true })
+mkdirSync(ASSETS_DIR, { recursive: true })
+
+const writeMap = {}
+for (const [name, dataUri] of Object.entries(icons)) {
+  if (typeof dataUri !== 'string' || !dataUri.startsWith('data:image/svg+xml')) continue
+  const decoded = decodeURIComponent(dataUri.replace(/^data:image\/svg\+xml(;charset=utf-8)?,/, ''))
+  const fname = kebab(name) + '.svg'
+  writeFileSync(join(ASSETS_DIR, fname), decoded)
+  writeMap[dataUri] = ASSET_URL_PREFIX + fname
+}
+
+let scss = cssTemplate
+for (const [uri, url] of Object.entries(writeMap)) {
+  scss = scss.split(`url("${uri}")`).join(`url("${url}")`)
+}
+
+const header = '/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.\n' +
+               '   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */\n\n'
+
+writeFileSync(SCSS_OUT, header + scss + '\n')
+
+console.log(`hot-icons: wrote ${Object.keys(writeMap).length} SVGs + ${SCSS_OUT}`)

client/scripts/strip-clr-base64-fonts.mjs

@@ -0,0 +1,59 @@
+import { readFileSync, writeFileSync, statSync, rmSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+/**
+ * Remove Clarity's Metropolis @font-face blocks from clr-ui.min.css.
+ *
+ * Why: Clarity ships Metropolis as base64 data: URLs. The deployed app
+ * runs under CSP `default-src 'self'` (no data: font-src), so every page
+ * logs a font-load failure for each weight. Firefox preemptively
+ * validates every parsed src against CSP even when a later @font-face
+ * supersedes the rule at render time, so the only way to silence the
+ * console is to remove the offending blocks from the parsed CSS.
+ *
+ * Our styles.scss declares the same family/weight/style with same-origin
+ * .woff files, so removing Clarity's blocks entirely is safe and leaves
+ * Metropolis fully functional.
+ *
+ * Idempotent: matches by font-family, so works on a fresh install or a
+ * file that's already been stripped on a previous run.
+ */
+const target = resolve('node_modules/@clr/ui/clr-ui.min.css')
+
+let css
+try {
+  css = readFileSync(target, 'utf8')
+} catch (err) {
+  if (err.code === 'ENOENT') {
+    console.log(`skip: ${target} not found (likely pre-install run)`)
+    process.exit(0)
+  }
+  throw err
+}
+
+const sizeBefore = statSync(target).size
+const blockRe = /@font-face\{[^}]*Metropolis[^}]*\}/g
+const matches = css.match(blockRe) ?? []
+
+if (matches.length === 0) {
+  console.log(`already stripped: ${target}`)
+  process.exit(0)
+}
+
+const stripped = css.replace(blockRe, '')
+writeFileSync(target, stripped)
+const sizeAfter = Buffer.byteLength(stripped)
+console.log(
+  `removed ${matches.length} Metropolis @font-face block(s) from clr-ui.min.css ` +
+    `(${sizeBefore} -> ${sizeAfter} bytes, saved ${sizeBefore - sizeAfter})`
+)
+
+// Webpack 5's persistent cache treats node_modules as immutable
+// (snapshot.module.managedPaths default), so in-place edits don't
+// invalidate cached entries. Drop the Angular build cache so the next
+// build re-reads our stripped clr-ui.min.css.
+const cacheDir = resolve('.angular/cache')
+if (existsSync(cacheDir)) {
+  rmSync(cacheDir, { recursive: true, force: true })
+  console.log(`cleared ${cacheDir} (webpack persistent cache)`)
+}

client/src/_hot-icons.scss

@@ -0,0 +1,238 @@
+/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.
+   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .pika-single .pika-next {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .pika-single .pika-prev {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-size-section__select-wrapper::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .changeType::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUISelectCaption::after,
+.htAutocompleteArrow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.ascending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.descending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/check.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput {
+  appearance: none;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenColumn::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenColumn::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenRow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenRow::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator::before,
+[class*=ht-theme-classic] .ht_nestingButton::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-off.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator.collapsed::before,
+[class*=ht-theme-classic] .ht_nestingButton.ht_nestingExpand::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-on.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUIRadio > input[type="radio"]::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/radio.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-chip-remove::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-notification__close::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-search-icon {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/search.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-item-selected input::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}

client/src/app/app.component.html

@@ -127,9 +127,10 @@
       "
       (click)="toggleSidebar()"
       type="button"
+      aria-label="Toggle sidebar"
       class="cursor-pointer select-none ml-10 d-flex clr-justify-content-center clr-align-items-center"
     >
-      <clr-icon size="24" shape="tree-view"></clr-icon>
+      <clr-icon size="24" shape="tree-view" aria-hidden="true"></clr-icon>
     </div>
 
     <div class="logo d-flex clr-align-items-center">

client/src/app/app.component.ts

@@ -209,6 +209,7 @@ export class AppComponent {
       dcPath: getAppAttribute('dcPath') || '',
       debug: getAppAttribute('debug') === 'true' || false,
       useComputeApi: this.parseComputeApi(getAppAttribute('useComputeApi')),
+      runAsTask: getAppAttribute('runAsTask') === 'true' || false,
       contextName: getAppAttribute('contextName') || '',
       hotLicenceKey: getAppAttribute('hotLicenceKey') || ''
     }

client/src/app/app.d.ts

@@ -1,5 +1,4 @@
 declare module 'save-svg-as-png'
-declare module 'numbro/dist/languages.min'
 declare interface Navigator {
   msSaveBlob: (blob: any, defaultName?: string) => boolean
 }

client/src/app/app.routing.ts

@@ -8,15 +8,7 @@ import { RouterModule, Routes } from '@angular/router'
 
 import { NotFoundComponent } from './not-found/not-found.component'
 
-import { DeployModule } from './deploy/deploy.module'
-import { EditorModule } from './editor/editor.module'
-import { HomeModule } from './home/home.module'
-import { LicensingModule } from './licensing/licensing.module'
-import { ReviewModule } from './review/review.module'
 import { ReviewRouteComponent } from './routes/review-route/review-route.component'
-import { StageModule } from './stage/stage.module'
-import { SystemModule } from './system/system.module'
-import { ViewerModule } from './viewer/viewer.module'
 
 /**
  * Defining routes
@@ -25,7 +17,8 @@ export const ROUTES: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
     path: 'view',
-    loadChildren: () => ViewerModule
+    loadChildren: () =>
+      import('./viewer/viewer.module').then((m) => m.ViewerModule)
   },
   {
     /**
@@ -37,36 +30,42 @@ export const ROUTES: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'toapprove' },
       {
         path: '',
-        loadChildren: () => ReviewModule
+        loadChildren: () =>
+          import('./review/review.module').then((m) => m.ReviewModule)
       }
     ]
   },
   {
     path: 'licensing',
-    loadChildren: () => LicensingModule
+    loadChildren: () =>
+      import('./licensing/licensing.module').then((m) => m.LicensingModule)
   },
   {
     path: 'home',
-    loadChildren: () => HomeModule
+    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule)
   },
   {
     /**
      * Load editor module with subroutes
      */
     path: 'editor',
-    loadChildren: () => EditorModule
+    loadChildren: () =>
+      import('./editor/editor.module').then((m) => m.EditorModule)
   },
   {
     path: 'stage',
-    loadChildren: () => StageModule
+    loadChildren: () =>
+      import('./stage/stage.module').then((m) => m.StageModule)
   },
   {
     path: 'system',
-    loadChildren: () => SystemModule
+    loadChildren: () =>
+      import('./system/system.module').then((m) => m.SystemModule)
   },
   {
     path: 'deploy',
-    loadChildren: () => DeployModule
+    loadChildren: () =>
+      import('./deploy/deploy.module').then((m) => m.DeployModule)
   },
   { path: '**', component: NotFoundComponent }
 ]

client/src/app/deploy/deploy.component.html

@@ -1,4 +1,4 @@
-<div class="content-area position-relative">
+<main class="content-area position-relative">
   <div class="clr-row">
     <!-- T&C section -->
     <div *ngIf="step === 0" id="TCS" class="card">
@@ -97,4 +97,4 @@
       </div>
     </ng-container>
   </ng-container>
-</div>
+</main>

client/src/app/deploy/sections/automatic/automatic.component.ts

@@ -373,7 +373,7 @@ export class AutomaticComponent implements OnInit {
     let contextname = `&_contextname=${params.contextName}`
     let admin = `&admin=${params.admin}`
     let dcPath = `&dcpath=${params.dcPath}`
-    let debug = `&_debug=131`
+    let debug = this.sasService.getDebugUrlParam()
 
     let programUrl =
       serverUrl +

client/src/app/deploy/sections/manual/manual.component.ts

@@ -251,7 +251,7 @@ export class ManualComponent implements OnInit {
           this.selectedAdminGroup +
           '&DCPATH=' +
           this.dcPath +
-          '&_debug=131'
+          this.sasService.getDebugUrlParam()
 
       window.open(url, '_blank')
 

client/src/app/editor/components/edit-record/edit-record.component.html

@@ -177,45 +177,45 @@
                 </div>
               </ng-container>
 
-              <clr-textarea-container class="date-field" *ngSwitchCase="'time'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-time'">
+                <input
+                  type="time"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                   [class.invalid-data]="
                     currentRecordInvalidCols.includes(col.key)
                   "
-                  [rows]="col.value.length > 80 ? 6 : 1"
-                  [(ngModel)]="currentRecord[col.key]"
-                  [class.not-char]="
-                    currentRecordValidator?.getRule(col.key)?.type
-                  "
-                ></textarea>
-                <clr-control-helper>HH:mm:ss</clr-control-helper>
-              </clr-textarea-container>
+                  [value]="currentRecord[col.key]"
+                  (change)="recordTimeChange($event, col.key)"
+                />
+              </div>
 
-              <div class="date-field" *ngSwitchCase="'date'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-datetime'">
+                <input
+                  type="datetime-local"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                   [class.invalid-data]="
                     currentRecordInvalidCols.includes(col.key)
                   "
-                  rows="1"
-                  cols="auto"
-                  class="not-char"
-                  [(ngModel)]="currentRecord[col.key]"
-                ></textarea>
-                <clr-date-container class="date-picker">
-                  <input
-                    type="date"
-                    name="date"
-                    class="d-none"
-                    (clrDateChange)="recordDateChange($event, col.key)"
-                    clrDate
-                  />
-                </clr-date-container>
+                  [value]="toNativeDatetime(currentRecord[col.key])"
+                  (change)="recordDatetimeChange($event, col.key)"
+                />
+              </div>
+
+              <div class="date-field" *ngSwitchCase="'intl-date'">
+                <input
+                  type="date"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
+                  [class.invalid-data]="
+                    currentRecordInvalidCols.includes(col.key)
+                  "
+                  [value]="currentRecord[col.key]"
+                  (change)="recordDateChange($event, col.key)"
+                />
               </div>
               <div *ngSwitchCase="'autocomplete'">
                 <ng-container
@@ -255,6 +255,7 @@
         type="button"
         class="btn btn-outline focusable"
         tabindex="0"
+        aria-label="Previous record"
         (click)="onPreviousRecordClick()"
         [disabled]="currentRecordInvalidCols.length > 0"
       >
@@ -267,6 +268,7 @@
         type="button"
         class="btn btn-outline focusable"
         tabindex="0"
+        aria-label="Next record"
         (click)="onNextRecordClick()"
         [disabled]="currentRecordInvalidCols.length > 0"
       >

client/src/app/editor/components/edit-record/edit-record.component.ts

@@ -2,12 +2,12 @@ import { KeyValue } from '@angular/common'
 import {
   Component,
   EventEmitter,
+  HostListener,
   Input,
   OnInit,
   Output,
   ViewEncapsulation
 } from '@angular/core'
-import moment from 'moment'
 import { ValidateFilterSASResponse } from 'src/app/models/sas/validate-filter.model'
 import { QueryClause } from 'src/app/models/TableData'
 import { HelperService } from 'src/app/services/helper.service'
@@ -91,17 +91,69 @@ export class EditRecordComponent implements OnInit {
   }
 
   /**
-   * Fired when date field in the record change
-   * Function will parse date and format to string
-   * @param date picker value
+   * Fired when the native date picker (intl-date) changes. A native
+   * `<input type="date">` value is always ISO `YYYY-MM-DD`, so it is stored
+   * as-is. Mirrors recordTimeChange / recordDatetimeChange.
+   * @param event native <input type="date"> change event
    * @param colKey column name (key)
    */
-  recordDateChange(date: Date, colKey: string) {
-    let cellValidation = this.currentRecordValidator?.getRule(colKey)
-    let format = cellValidation ? cellValidation.dateFormat : ''
+  recordDateChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DD
+    if (!value || !this.currentRecord) return
+    this.currentRecord[colKey] = value
+    this.revalidateRecordCol(colKey, value)
+  }
 
-    if (this.currentRecord)
-      this.currentRecord[colKey] = moment(date).format(format)
+  /**
+   * Stored `YYYY-MM-DD HH:mm:ss` → native `<input type="datetime-local">` value
+   * `YYYY-MM-DDTHH:mm:ss`, so the picker opens at the current value.
+   */
+  toNativeDatetime(value: any): string {
+    if (typeof value !== 'string') return ''
+    return value.includes(' ') ? value.replace(' ', 'T') : value
+  }
+
+  /**
+   * Re-runs validation for a column after a native picker change (the picker
+   * handlers set the value programmatically, which does not fire the textarea's
+   * input handler). Mirrors recordInputChange's validate + state update.
+   */
+  private revalidateRecordCol(colName: string, value: any) {
+    const colRules = this.currentRecordValidator?.getRule(colName)
+    this.validateRecordCol(colRules, value).then((valid: boolean) =>
+      this.updateValidationState(colName, valid)
+    )
+  }
+
+  /**
+   * Fired when the native time picker (intl-time) changes. Stores 24h
+   * `HH:mm:ss`, padding the seconds the browser may omit. Mirrors the
+   * IntlDatetimeEditor conversion used by the HOT grid.
+   * @param event native <input type="time"> change event
+   * @param colKey column name (key)
+   */
+  recordTimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // HH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const stored = value.length === 5 ? `${value}:00` : value
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
+  }
+
+  /**
+   * Fired when the native datetime picker (intl-datetime) changes. Converts the
+   * native `YYYY-MM-DDTHH:mm[:ss]` into SAS' stored `YYYY-MM-DD HH:mm:ss`,
+   * padding seconds. Mirrors the IntlDatetimeEditor conversion used by the grid.
+   * @param event native <input type="datetime-local"> change event
+   * @param colKey column name (key)
+   */
+  recordDatetimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DDTHH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const [date, time] = value.split('T')
+    const stored = `${date} ${time.length === 5 ? `${time}:00` : time}`
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
   }
 
   /**
@@ -120,6 +172,16 @@ export class EditRecordComponent implements OnInit {
     this.onRecordEditClose.emit()
   }
 
+  /**
+   * Close the modal on Escape (cancel, like the Close button). A native picker
+   * swallows the first Escape to dismiss itself, so the modal only closes once
+   * focus is back on the form.
+   */
+  @HostListener('document:keydown.escape')
+  onEscapeKey() {
+    this.closeRecordEdit()
+  }
+
   /**
    * Emitting output event when dropdown (autocomplete) input in any col change
    * @param colName column name (key)
@@ -233,8 +295,9 @@ export class EditRecordComponent implements OnInit {
           if (obj.data === key) {
             if (
               obj.type === 'numeric' ||
-              obj.type === 'date' ||
-              obj.type === 'time'
+              obj.type === 'intl-date' ||
+              obj.type === 'intl-time' ||
+              obj.type === 'intl-datetime'
             ) {
               type = 'N'
             }

client/src/app/editor/editor.component.html

@@ -1,4 +1,4 @@
-<div class="content-area d-flex clr-flex-column">
+<main class="content-area d-flex clr-flex-column">
   <clr-modal
     appFileDrop
     (fileOver)="fileOverBase($event)"
@@ -172,14 +172,23 @@
             class="btn icon-collapse btn-sm btn-icon btn-dimmed"
             [routerLink]="['/home']"
           >
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="caret"
+              dir="left"
+              size="20"
+            ></clr-icon>
             <span class="text">Back to table selection</span>
           </span>
           <span
             (click)="viewboxManager()"
             class="btn icon-collapse btn-sm btn-icon btn-dimmed viewbox-open"
           >
-            <clr-icon shape="view-cards" size="20"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="view-cards"
+              size="20"
+            ></clr-icon>
             <span class="text">Viewboxes</span>
           </span>
         </div>
@@ -207,6 +216,7 @@
 
               <clr-icon
                 *ngIf="libdsParsed.tableName.includes('-FC')"
+                aria-hidden="true"
                 shape="bolt"
                 class="color-yellow"
               ></clr-icon>
@@ -251,7 +261,7 @@
               class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
             >
-              <clr-icon shape="filter"></clr-icon>
+              <clr-icon aria-hidden="true" shape="filter"></clr-icon>
               <span class="text">Filter</span>
             </button>
 
@@ -260,7 +270,7 @@
               class="btn icon-collapse btn-sm btn-primary btn-block"
               (click)="editTable()"
             >
-              <clr-icon shape="note"></clr-icon>
+              <clr-icon aria-hidden="true" shape="note"></clr-icon>
               <span class="text">Edit</span>
             </button>
 
@@ -270,7 +280,7 @@
               type="button"
               class="btn icon-collapse btn-sm btn-success btn-block mr-0"
             >
-              <clr-icon shape="upload"></clr-icon>
+              <clr-icon aria-hidden="true" shape="upload"></clr-icon>
               <span class="text">Upload</span>
             </button>
           </ng-container>
@@ -281,7 +291,7 @@
               class="btn btn-sm btn-icon btn-outline-danger"
               (click)="cancelEdit()"
             >
-              <clr-icon shape="times"></clr-icon>
+              <clr-icon aria-hidden="true" shape="times"></clr-icon>
               <span>Cancel</span>
             </button>
 
@@ -294,7 +304,8 @@
                 [class.dc-locked-control]="restrictions.restrictAddRow"
                 (click)="!restrictions.restrictAddRow ? addRow() : ''"
               >
-                <clr-icon shape="plus" size="16"></clr-icon>Add Row
+                <clr-icon aria-hidden="true" shape="plus" size="16"></clr-icon
+                >Add Row
               </button>
 
               <clr-tooltip-content
@@ -319,7 +330,8 @@
               class="btn btn-sm btn-primary"
               (click)="checkSave()"
             >
-              <clr-icon shape="check" size="20"></clr-icon>Submit
+              <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon
+              >Submit
             </button>
           </ng-container>
 
@@ -329,7 +341,7 @@
               class="btn btn-sm btn-icon btn-outline-danger btn-upload-preview"
               (click)="discardSourceFile = true"
             >
-              <clr-icon shape="times"></clr-icon>
+              <clr-icon aria-hidden="true" shape="times"></clr-icon>
               <span>Discard file</span>
             </button>
 
@@ -339,7 +351,7 @@
               class="btn btn-sm btn-primary btn-upload-preview"
               (click)="manualFileEditModal = true"
             >
-              <clr-icon shape="note"></clr-icon>
+              <clr-icon aria-hidden="true" shape="note"></clr-icon>
               <span>Edit</span>
             </button>
 
@@ -349,7 +361,7 @@
               (click)="submitExcel()"
               [clrLoading]="uploadLoading"
             >
-              <clr-icon shape="check" size="20"></clr-icon>
+              <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon>
               Submit
             </button>
           </ng-container>
@@ -382,7 +394,11 @@
 
             <ng-container *ngIf="getdataError">
               <span>
-                <clr-icon shape="error-standard" class="error-icon"></clr-icon>
+                <clr-icon
+                  aria-hidden="true"
+                  shape="error-standard"
+                  class="error-icon"
+                ></clr-icon>
               </span>
 
               <div class="mt-10">
@@ -430,7 +446,7 @@
                   !restrictions.restrictAddRow ? addRecordButtonClick() : ''
                 "
               >
-                <clr-icon shape="plus" size="16"></clr-icon>
+                <clr-icon aria-hidden="true" shape="plus" size="16"></clr-icon>
                 Add Record
               </button>
 
@@ -686,7 +702,7 @@
       </div> -->
     </div>
   </div>
-</div>
+</main>
 
 <div class="modal z-index-highest" *ngIf="nullVariables">
   <div class="modal-dialog" role="dialog" aria-hidden="true">
@@ -873,3 +889,17 @@
 </app-dataset-info>
 
 <app-viewboxes [(viewboxModal)]="viewboxes"></app-viewboxes>
+
+<app-confirm-modal
+  [open]="confirmModal.open"
+  [title]="confirmModal.title"
+  [message]="confirmModal.message"
+  (result)="onConfirmModalResult($event)"
+></app-confirm-modal>
+
+<app-bulk-validation-modal
+  [open]="bulkValidation.active"
+  [done]="bulkValidation.done"
+  [total]="bulkValidation.total"
+  (cancel)="cancelBulkValidation({ revert: true })"
+></app-bulk-validation-modal>

client/src/app/editor/editor.component.ts

@@ -13,6 +13,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router'
 import Handsontable from 'handsontable'
 import { Subject, Subscription } from 'rxjs'
+import { sanitiseForSas } from '../shared/utils/sanitise'
 import { SasStoreService } from '../services/sas-store.service'
 
 type AOA = any[][]
@@ -25,6 +26,7 @@ import { CellValidationSource } from '../models/CellValidationSource'
 import { FileUploader } from '../models/FileUploader.class'
 import { FilterGroup, FilterQuery } from '../models/FilterQuery'
 import { HotTableInterface } from '../models/HotTable.interface'
+import { buildExportMenuItem } from '../shared/hot-export/hot-export.util'
 import {
   $DataFormats,
   DSMeta,
@@ -43,6 +45,7 @@ import { Col } from '../shared/dc-validator/models/col.model'
 import { DcValidation } from '../shared/dc-validator/models/dc-validation.model'
 import { DQRule } from '../shared/dc-validator/models/dq-rules.model'
 import { getHotDataSchema } from '../shared/dc-validator/utils/getHotDataSchema'
+import { excelRound } from '../shared/dc-validator/utils/excelRound'
 import { isEmpty } from '../shared/dc-validator/utils/isEmpty'
 import { globals } from '../_globals'
 import { UploadStaterComponent } from './components/upload-stater/upload-stater.component'
@@ -56,8 +59,6 @@ import {
   spinnerRenderer
 } from './utils/renderers.utils'
 import { LicenceService } from '../services/licence.service'
-import * as numbro from 'numbro'
-import * as languages from 'numbro/dist/languages.min'
 import { FileUploadEncoding } from '../models/FileUploadEncoding'
 import { SpreadsheetService } from '../services/spreadsheet.service'
 import { UploadFileResponse } from '../models/UploadFile'
@@ -132,7 +133,9 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       licenseKey: this.hotTable.licenseKey,
       readOnly: this.hotTable.readOnly,
       copyPaste: this.hotTable.copyPaste,
-      contextMenu: true
+      contextMenu: true,
+      className: 'htDark',
+      theme: 'ht-theme-classic'
     }
   }
 
@@ -156,6 +159,9 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             hidden() {
               const hot: Handsontable.Core = this
 
+              // Hide editing actions in read-only (view) mode.
+              if (hot.getSettings().readOnly) return true
+
               const fullCellRange: CellRange[] | undefined =
                 hot.getSelectedRange()
 
@@ -179,6 +185,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           },
           row_above: {
             name: 'Insert Row above',
+            hidden: () => this.hotTable.readOnly === true,
             callback: (
               key: string,
               selection: any[],
@@ -192,6 +199,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           },
           row_below: {
             name: 'Insert Row below',
+            hidden: () => this.hotTable.readOnly === true,
             callback: (
               key: string,
               selection: any[],
@@ -204,7 +212,8 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             }
           },
           remove_row: {
-            name: 'Ignore row'
+            name: 'Ignore row',
+            hidden: () => this.hotTable.readOnly === true
           },
           copy: {
             name: 'Copy without headers'
@@ -215,14 +224,20 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           copy_column_headers_only: {
             name: 'Copy headers only'
           },
+          // Client-side export of the current grid view (or selection).
+          // skipLeadingCols=1 drops the `Delete?` housekeeping column (col 0).
+          export_file: buildExportMenuItem(() => this.libds || 'export', 1),
           sp1: {
-            name: '---------'
+            name: '---------',
+            hidden: () => this.hotTable.readOnly === true
           },
           undo: {
-            name: 'Undo'
+            name: 'Undo',
+            hidden: () => this.hotTable.readOnly === true
           },
           redo: {
-            name: 'Redo'
+            name: 'Redo',
+            hidden: () => this.hotTable.readOnly === true
           }
         }
       }
@@ -356,11 +371,36 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
    * Hash/values table used for dynamic cell validation
    */
   public cellValidationSource: CellValidationSource[] = []
-  public validationTableLimit = 20
+  public validationTableLimit = 100
+
+  // Incremented on cancel/edit-exit so in-flight dynamic-validation
+  // responses can detect they should drop their post-response work.
+  private validationEpoch = 0
+  // Cells currently showing the loading spinner renderer (keyed `r,c`),
+  // so cancelBulkValidation can reset them.
+  private pendingSpinnerCells = new Set<string>()
+
+  // State for the bulk-validation progress banner (paste / autofill).
+  public bulkValidation: {
+    active: boolean
+    done: number
+    total: number
+  } = { active: false, done: 0, total: 0 }
+
+  // Confirm-modal state used to gate large paste validations.
+  public confirmModal: {
+    open: boolean
+    title: string
+    message: string
+  } = { open: false, title: '', message: '' }
+  private confirmModalResolver: ((v: boolean) => void) | null = null
+  // Index maps into the positional arrays returned by getdynamiccolvals.
+  // The DISPLAY_VALUE column was dropped from the payload (it was never consumed
+  // here — the dropdown source uses RAW_VALUE and rows are matched via
+  // DISPLAY_INDEX), so these indices are contiguous.
   public extendedCellValidationFields: {
     DISPLAY_INDEX: number
     EXTRA_COL_NAME: number
-    DISPLAY_VALUE: number
     DISPLAY_TYPE: number
     RAW_VALUE_NUM: number
     RAW_VALUE_CHAR: number
@@ -368,18 +408,16 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   } = {
     DISPLAY_INDEX: 0,
     EXTRA_COL_NAME: 1,
-    DISPLAY_VALUE: 2,
-    DISPLAY_TYPE: 3,
-    RAW_VALUE_NUM: 4,
-    RAW_VALUE_CHAR: 5,
-    FORCE_FLAG: 6
+    DISPLAY_TYPE: 2,
+    RAW_VALUE_NUM: 3,
+    RAW_VALUE_CHAR: 4,
+    FORCE_FLAG: 5
   }
 
   public cellValidationFields: {
     DISPLAY_INDEX: number
-    DISPLAY_VALUE: number
     RAW_VALUE: number
-  } = { DISPLAY_INDEX: 0, DISPLAY_VALUE: 1, RAW_VALUE: 2 }
+  } = { DISPLAY_INDEX: 0, RAW_VALUE: 1 }
 
   public disabledBasicDynamicCellValidationMap: {
     row: number
@@ -404,10 +442,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     private cdf: ChangeDetectorRef,
     private spreadsheetService: SpreadsheetService
   ) {
-    const lang = languages[window.navigator.language]
-    if (lang)
-      numbro.default.registerLanguage(languages[window.navigator.language])
-
     this.parseRestrictions()
     this.setRestrictions()
   }
@@ -962,7 +996,11 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   cancelEdit() {
-    this.toggleHotPlugin('contextMenu', false)
+    this.cancelBulkValidation({ revert: false })
+
+    // Keep the context menu enabled after leaving edit mode (view mode keeps
+    // Copy/Export; editing items hide themselves when read-only).
+    this.toggleHotPlugin('contextMenu', true)
 
     this.cellValidationSource = []
 
@@ -991,7 +1029,8 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       false
     )
 
-    hot.validateRows(this.modifedRowsIndexes)
+    this.modifedRowsIndexes = []
+    hot.validateCells()
     // this.editRecordListeners();
     for (const sortConfig of sortConfigs) {
       columnSorting.sort(sortConfig)
@@ -1000,6 +1039,160 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     this.checkRowLimit()
   }
 
+  /**
+   * Stop the bulk-validation flow (paste / autofill): invalidate in-flight
+   * responses via the epoch counter, reset spinner cells, hide the banner,
+   * and (when triggered from the banner's Cancel button) undo the change.
+   */
+  public cancelBulkValidation(opts: { revert?: boolean } = {}) {
+    const wasActive = this.bulkValidation.active
+
+    // Invalidate any in-flight dynamicCellValidation responses. Note:
+    // sasService.request has no abort signal, so the network request itself
+    // keeps running — we only drop the response handling.
+    this.validationEpoch++
+
+    // Reset any cells still showing the loading spinner renderer.
+    const hot = this.hotInstance
+    if (hot && this.pendingSpinnerCells.size > 0) {
+      for (const key of this.pendingSpinnerCells) {
+        const [rStr, cStr] = key.split(',')
+        const r = Number(rStr)
+        const c = Number(cStr)
+        hot.setCellMeta(r, c, 'renderer', noSpinnerRenderer)
+      }
+      this.pendingSpinnerCells.clear()
+    }
+
+    // Drop placeholder entries (values still empty — request was cancelled).
+    this.cellValidationSource = this.cellValidationSource.filter(
+      (entry) => !entry.pending || entry.values.length > 0
+    )
+
+    this.bulkValidation = {
+      active: false,
+      done: 0,
+      total: 0
+    }
+
+    if (wasActive && opts.revert && hot) {
+      this.undoLastChange(hot)
+    }
+    if (hot) hot.render()
+  }
+
+  private undoLastChange(hot: Handsontable): void {
+    const plugin = hot.getPlugin('undoRedo') as unknown as
+      | { isUndoAvailable(): boolean; undo(): void }
+      | undefined
+    if (plugin?.isUndoAvailable()) plugin.undo()
+  }
+
+  /**
+   * Drive dynamic-source load + validation for cells that were bulk-filled
+   * (paste or autofill). HARDSELECT_HOOK / SOFTSELECT_HOOK columns need a SAS
+   * roundtrip; non-hook cells just need HOT's static validators. Caps backend
+   * concurrency, uses an epoch so a cancelled run can't mutate later state,
+   * and gates >3-cell runs behind a confirm modal.
+   */
+  private async runBulkValidation(
+    hot: Handsontable,
+    ranges: Array<{
+      startRow: number
+      startCol: number
+      endRow: number
+      endCol: number
+    }>,
+    source: 'paste' | 'autofill'
+  ): Promise<void> {
+    const rows = new Set<number>()
+    const hookTargets: Array<{ r: number; c: number }> = []
+    const hookCols = new Set<string>()
+    for (const range of ranges) {
+      for (let r = range.startRow; r <= range.endRow; r++) {
+        for (let c = range.startCol; c <= range.endCol; c++) {
+          rows.add(r)
+          const colKey = hot.colToProp(c) as string
+          if (this.dcValidator?.hasDqRules(colKey, ['HARDSELECT_HOOK'])) {
+            hookCols.add(colKey)
+            hookTargets.push({ r, c })
+          }
+        }
+      }
+    }
+
+    // No hook columns → HOT's own setDataAtCell → validateChanges pass
+    // (triggered by populateFromArray) already validates against the new
+    // value and paints htInvalid. A second validateRows here would race:
+    // it runs sync inside afterPaste/afterAutofill BEFORE applyChanges
+    // writes the data, captures the stale old value, and overwrites
+    // cellProperties.valid back to true — causing a 1-action lag.
+    if (hookTargets.length === 0) return
+
+    if (hookTargets.length === 1) {
+      const { r, c } = hookTargets[0]
+      await this.dynamicCellValidation(r, c)
+      hot.validateRows([...rows], () => hot.render())
+      return
+    }
+
+    if (hookTargets.length > 3) {
+      const colsList = [...hookCols].join(', ')
+      const ok = await this.showConfirmModal(
+        `Confirm ${source} validation`,
+        `You are about to trigger ${hookTargets.length} backend SAS request(s) for columns: ${colsList}. Do you wish to proceed?`
+      )
+      if (!ok) {
+        this.undoLastChange(hot)
+        return
+      }
+    }
+
+    const epoch = this.validationEpoch
+    this.bulkValidation = {
+      active: true,
+      done: 0,
+      total: hookTargets.length
+    }
+
+    const CONCURRENCY = 2
+    let idx = 0
+    await Promise.all(
+      Array.from({ length: CONCURRENCY }, async () => {
+        while (idx < hookTargets.length) {
+          if (epoch !== this.validationEpoch) return
+          const { r, c } = hookTargets[idx++]
+          await this.dynamicCellValidation(r, c, { skipRender: true })
+          if (epoch === this.validationEpoch) {
+            this.bulkValidation.done++
+          }
+        }
+      })
+    )
+
+    if (epoch !== this.validationEpoch) return
+
+    this.bulkValidation = {
+      ...this.bulkValidation,
+      active: false
+    }
+    hot.validateRows([...rows], () => hot.render())
+  }
+
+  private showConfirmModal(title: string, message: string): Promise<boolean> {
+    this.confirmModal = { open: true, title, message }
+    return new Promise<boolean>((resolve) => {
+      this.confirmModalResolver = resolve
+    })
+  }
+
+  public onConfirmModalResult(value: boolean) {
+    const resolver = this.confirmModalResolver
+    this.confirmModalResolver = null
+    this.confirmModal = { ...this.confirmModal, open: false }
+    if (resolver) resolver(value)
+  }
+
   timesClicked = 0
   public hotClicked() {
     if (this.timesClicked === 1 && this.hotTable.readOnly) {
@@ -1669,7 +1862,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.submit = true
       const updateParams: any = {}
       updateParams.ACTION = 'LOAD'
-      this.message = this.message.replace(/\n/g, '. ')
+      this.message = sanitiseForSas(this.message.replace(/\n/g, '. '))
       updateParams.MESSAGE = this.message
       // updateParams.APPROVER = this.approver;
       updateParams.LIBDS = this.libds
@@ -1968,18 +2161,26 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
    * @param row handsontable row
    * @param column handsontable column
    */
-  public dynamicCellValidation(row: number, column: number) {
-    if (this.dynamicCellValidationDisabled(row, column)) return
+  public async dynamicCellValidation(
+    row: number,
+    column: number,
+    opts?: { skipRender?: boolean },
+    retried = false
+  ): Promise<void> {
+    if (this.dynamicCellValidationDisabled(row, column))
+      return Promise.resolve()
 
     const hot = this.hotInstance
 
     const cellMeta = hot.getCellMeta(row, column)
 
-    if (cellMeta.readOnly) return
+    if (cellMeta.readOnly) return Promise.resolve()
 
     const cellData = hot.getDataAtCell(row, column)
     const clickedRow = this.helperService.deepClone(this.dataSource[row])
     const clickedColumnKey = Object.keys(clickedRow)[column]
+    const skipRender = !!opts?.skipRender
+    const myEpoch = this.validationEpoch
 
     /**
      * We will hash the row (without current column) so later we check if hash is the same
@@ -2000,6 +2201,22 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
      * Set the values for found hash.
      */
 
+    if (validationSourceIndex > -1) {
+      // In-flight dedup: another call with the same hash is mid-request.
+      // Wait for it then re-enter once so we walk the populated cache-hit
+      // path instead of validating against the empty placeholder.
+      const inFlight = this.cellValidationSource[validationSourceIndex].pending
+      if (inFlight && !retried) {
+        try {
+          await inFlight
+        } catch {
+          /* swallowed — original caller handles */
+        }
+        if (myEpoch !== this.validationEpoch) return
+        return this.dynamicCellValidation(row, column, opts, true)
+      }
+    }
+
     if (validationSourceIndex > -1) {
       let colSource = this.cellValidationSource[
         validationSourceIndex
@@ -2075,14 +2292,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           cellHadSource && cellHasValue
         )
 
-        hot.render()
+        if (!skipRender) hot.render()
       })
-    }
-
-    /**
-     * Send request to sas.
-     */
-    if (validationSourceIndex < 0) {
+    } else if (validationSourceIndex < 0) {
+      /**
+       * Send request to sas.
+       */
       const data = {
         SASControlTable: [
           {
@@ -2114,21 +2329,53 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           count: this.cellValidationSource.length + 1
         })
 
-        hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
-
         this.currentEditRecordLoadings.push(column)
-        hot.render()
 
-        this.sasService
+        const spinnerKey = `${row},${column}`
+
+        // Defer the spinner renderer so the click event finishes settling
+        // HOT's focus catcher before we replace td.innerHTML. Without this
+        // defer, clicking the cell loses focus immediately.
+        // Skip the spinner entirely if SAS responds before this fires —
+        // avoids the brief flicker users were seeing on fast responses.
+        // Also skip during paste (skipRender) — the progress banner handles
+        // visual feedback and cell spinners would just flicker.
+        const spinnerTimeout: ReturnType<typeof setTimeout> | null = skipRender
+          ? null
+          : setTimeout(() => {
+              hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
+              this.pendingSpinnerCells.add(spinnerKey)
+              hot.render()
+            }, 150)
+
+        const pendingPromise = this.sasService
           .request('editors/getdynamiccolvals', data, undefined, {
             suppressSuccessAbortModal: true,
             suppressErrorAbortModal: true
           })
-          .then((res: RequestWrapperResponse) => {
+          .then(async (res: RequestWrapperResponse) => {
+            if (spinnerTimeout) clearTimeout(spinnerTimeout)
+            this.pendingSpinnerCells.delete(spinnerKey)
+
+            // Cancelled mid-flight — drop the placeholder entry so future
+            // calls don't see an empty cache hit, and skip all UI work.
+            if (myEpoch !== this.validationEpoch) {
+              const idx = this.cellValidationSource.findIndex(
+                (e) => e.hash === hashedRow
+              )
+              if (idx > -1) this.cellValidationSource.splice(idx, 1)
+              return
+            }
+
             const colSource = res.adapterResponse.dynamic_values.map(
               (el: any) => el[this.cellValidationFields.RAW_VALUE]
             )
 
+            this.currentEditRecordLoadings.splice(
+              this.currentEditRecordLoadings.indexOf(column),
+              1
+            )
+
             if (colSource.length > 0) {
               const validationSourceIndex = this.cellValidationSource.findIndex(
                 (entry: CellValidationSource) => entry.hash === hashedRow
@@ -2140,49 +2387,37 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
                   row: row,
                   col: column,
                   values: res.adapterResponse.dynamic_values,
-                  extended_values: res.adapterResponse.dynamic_extended_values
+                  extended_values: res.adapterResponse.dynamic_extended_values,
+                  pending: undefined
                 }
               }
 
-              //Removing the spinner from cell, so validation not fail
-              hot.setCellMeta(row, column, 'renderer', noSpinnerRenderer)
-              this.currentEditRecordLoadings.splice(
-                this.currentEditRecordLoadings.indexOf(column),
-                1
-              )
-              hot.deselectCell()
-              hot.render()
-
               /**
-               * `cells` function of hot settings is remembering the old state of component
-               * we need to update it here after we set new `cellValidationSource` (validation lookup hash table) values
-               * so that it will check those values to decide whether numeric cells should be
-               * converted to the dropdown
+               * In the case that the original value is not included in the newly created cell dropdown
+               * and validation type is HARDSELECT, the cell shoud be red
                */
-
-              hot.batch(() => {
-                /**
-                 * In the case that the original value is not included in the newly created cell dropdown
-                 * and validation type is HARDSELECT, the cell shoud be red
-                 */
+              await new Promise<void>((resolve) =>
                 setTimeout(() => {
                   this.reSetCellValidationValues(true, row)
-                  hot.render()
 
-                  hot.validateRows([row])
+                  if (!skipRender) {
+                    hot.render()
+                    hot.validateRows([row])
+                  }
+                  resolve()
                 }, 100)
-              })
+              )
+            } else {
+              if (!skipRender) {
+                hot.setCellMeta(row, column, 'renderer', noSpinnerRenderer)
+                hot.render()
+              }
+              const idx = this.cellValidationSource.findIndex(
+                (e) => e.hash === hashedRow
+              )
+              if (idx > -1) this.cellValidationSource[idx].pending = undefined
             }
 
-            //Removing the spinner from cell, so validation not fail
-            hot.setCellMeta(row, column, 'renderer', noSpinnerRenderer)
-            this.currentEditRecordLoadings.splice(
-              this.currentEditRecordLoadings.indexOf(column),
-              1
-            )
-            hot.deselectCell()
-            hot.render()
-
             /**
              * If hash table limit reached, remove the oldest element.
              * Oldest element is element with lowest `count` number.
@@ -2198,18 +2433,25 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             }
           })
           .catch((err: any) => {
+            if (spinnerTimeout) clearTimeout(spinnerTimeout)
+            this.pendingSpinnerCells.delete(spinnerKey)
+
             const currentRowHashIndex = this.cellValidationSource.findIndex(
               (x) => x.hash === hashedRow
             )
 
             this.cellValidationSource.splice(currentRowHashIndex, 1)
 
-            hot.batch(() => {
-              // Render error icon inside a cell
-              hot.setCellMeta(row, column, 'renderer', errorRenderer)
+            if (myEpoch !== this.validationEpoch) return
 
-              hot.render()
-            })
+            if (!skipRender) {
+              hot.batch(() => {
+                // Render error icon inside a cell
+                hot.setCellMeta(row, column, 'renderer', errorRenderer)
+
+                hot.render()
+              })
+            }
 
             //Stop edit record modal loading spinner
             this.currentEditRecordLoadings.splice(
@@ -2222,8 +2464,10 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
             // After waiting time remove the error icon from cell and edit record modal field
             setTimeout(() => {
-              hot.setCellMeta(row, column, 'renderer', noSpinnerRenderer)
-              hot.render()
+              if (!skipRender) {
+                hot.setCellMeta(row, column, 'renderer', noSpinnerRenderer)
+                hot.render()
+              }
 
               //Remove error icon on the edit record modal field
               this.currentEditRecordErrors.splice(
@@ -2236,8 +2480,19 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
             this.loggerService.log('getdynamiccolvals error:', err)
           })
+
+        const entryIdx = this.cellValidationSource.findIndex(
+          (e) => e.hash === hashedRow
+        )
+        if (entryIdx > -1) {
+          this.cellValidationSource[entryIdx].pending = pendingPromise
+        }
+
+        return pendingPromise
       }
     }
+
+    return Promise.resolve()
   }
 
   checkEmptyRowWhenFilter() {
@@ -2867,7 +3122,9 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     )
 
     this.hotTable.hidden = false
-    this.toggleHotPlugin('contextMenu', false)
+    // Keep the context menu enabled in view mode too so Copy/Export remain
+    // available; editing items hide themselves when read-only.
+    this.toggleHotPlugin('contextMenu', true)
     /**
      * This is needed if freeze column is enabled
      */
@@ -2937,6 +3194,31 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.setCellFilter(true)
     })
 
+    // ROUND: round numeric values Excel-style before they are written.
+    // Mutating `changes` in place (rather than setDataAtRowProp) avoids
+    // re-entrancy and uniformly covers edit, paste and autofill.
+    hot.addHook('beforeChange', (changes: any[]) => {
+      if (!changes) return
+
+      for (const change of changes) {
+        if (!change) continue
+
+        const [, prop, , newValue] = change
+        const colName =
+          typeof prop === 'string'
+            ? prop
+            : (hot.colToProp(prop as number) as string)
+
+        const digits = this.dcValidator?.getRoundDigits(colName)
+        if (digits === undefined) continue
+
+        const num = Number(newValue)
+        if (newValue !== null && newValue !== '' && !isNaN(num)) {
+          change[3] = excelRound(num, digits)
+        }
+      }
+    })
+
     hot.addHook('afterChange', (source: any, change: any) => {
       if (change === 'edit') {
         const hot = this.hotInstance
@@ -2955,6 +3237,38 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     })
 
+    hot.addHook('afterPaste', async (_data: any, coords: any) => {
+      // In read-only mode HOT discards the paste itself, so nothing to validate.
+      if (this.hotTable.readOnly) return
+      const ranges = (coords as any[]).map((r) => ({
+        startRow: r.startRow,
+        startCol: r.startCol,
+        endRow: r.endRow,
+        endCol: r.endCol
+      }))
+      await this.runBulkValidation(hot, ranges, 'paste')
+    })
+
+    hot.addHook(
+      'afterAutofill',
+      async (_fillData: any, _sourceRange: any, targetRange: any) => {
+        if (this.hotTable.readOnly) return
+        const { from, to } = targetRange
+        await this.runBulkValidation(
+          hot,
+          [
+            {
+              startRow: Math.min(from.row, to.row),
+              startCol: Math.min(from.col, to.col),
+              endRow: Math.max(from.row, to.row),
+              endCol: Math.max(from.col, to.col)
+            }
+          ],
+          'autofill'
+        )
+      }
+    )
+
     hot.addHook('afterRender', (isForced: boolean) => {
       this.eventService.dispatchEvent('resize')
 
@@ -3019,21 +3333,39 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     )
 
-    hot.addHook('beforePaste', (data: any, cords: any) => {
-      const startCol = cords[0].startCol
-
-      // We iterate trough pasting data to convert to numbers if needed
-      data[0] = data[0].map((value: any, index: number) => {
+    // Coerce numeric-column values from string → number so length-check
+    // and downstream validators see the correct type on the first pass
+    // (string "3.5" passes `Number(value) === value`, masking float-in-
+    // short-num errors until the next edit).
+    const coerceNumericRow = (
+      row: any[],
+      startCol: number,
+      rowMaxLen?: number
+    ): any[] =>
+      row.map((value: any, index: number) => {
+        if (rowMaxLen !== undefined && index >= rowMaxLen) return value
         const colName = this.columnHeader[startCol + index]
         const isColNum = this.$dataFormats?.vars[colName]?.type === 'num'
         const specialMissing = isSpecialMissing(value)
-
         if (isColNum && !isNaN(value) && !specialMissing) value = value * 1
-
         return value
       })
+
+    hot.addHook('beforePaste', (data: any, cords: any) => {
+      const startCol = cords[0].startCol
+      for (let r = 0; r < data.length; r++) {
+        data[r] = coerceNumericRow(data[r], startCol)
+      }
     })
 
+    hot.addHook(
+      'beforeAutofill',
+      (selectionData: any[][], sourceRange: any) => {
+        const startCol = sourceRange.from.col
+        return selectionData.map((row) => coerceNumericRow(row, startCol))
+      }
+    )
+
     hot.addHook('afterRemoveRow', () => {
       this.checkRowLimit()
     })

client/src/app/editor/models/dynamicExtendedCellValidation.ts

@@ -5,7 +5,6 @@
 export interface DynamicExtendedCellValidation {
   DISPLAY_INDEX: number
   DISPLAY_TYPE: string
-  DISPLAY_VALUE: string
   EXTRA_COL_NAME: string
   RAW_VALUE_CHAR: string
   RAW_VALUE_NUM: number

client/src/app/editor/utils/renderers.utils.spec.ts

@@ -0,0 +1,88 @@
+import Handsontable from 'handsontable'
+import { makeNumberFormatRenderer } from './renderers.utils'
+
+describe('makeNumberFormatRenderer', () => {
+  it('renders a numeric cell as EUR currency without changing the value', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    // Display is formatted as currency...
+    expect(td?.textContent).toContain('€')
+    expect(td?.textContent).toContain('1,025')
+    // ...but the stored value is untouched
+    expect(hot.getDataAtCell(0, 0)).toEqual(1025)
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('is overridden by numbro numericFormat (why DcValidator clears it for NUMBER_FORMAT cols)', () => {
+    // Regression note: on a `type: 'numeric'` column, a `numericFormat` makes
+    // HOT re-render via numbro and drop our currency symbol. DcValidator clears
+    // numericFormat on NUMBER_FORMAT columns so the Intl renderer wins.
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          numericFormat: { pattern: '0,0', culture: 'en-US' },
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('falls back to a plain number when options JSON is invalid', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer('not json')
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+})

client/src/app/editor/utils/renderers.utils.ts

@@ -1,3 +1,57 @@
+import Handsontable from 'handsontable'
+
+/**
+ * Builds a display-only HOT renderer that formats numeric cell values using
+ * Intl.NumberFormat. The stored/submitted value is never changed — only the
+ * rendered text. `ruleValue` is a JSON string of Intl.NumberFormat options
+ * (e.g. '{"style":"currency","currency":"EUR","minimumFractionDigits":2}').
+ *
+ * Falls back to the plain text renderer when the JSON is invalid, the options
+ * are rejected by Intl.NumberFormat, or the value is not a finite number.
+ */
+export const makeNumberFormatRenderer = (ruleValue?: string) => {
+  let formatter: Intl.NumberFormat | null = null
+
+  try {
+    const options = ruleValue ? JSON.parse(ruleValue) : {}
+    formatter = new Intl.NumberFormat(window.navigator.language, options)
+  } catch (e) {
+    console.warn(
+      `NUMBER_FORMAT - invalid Intl.NumberFormat options: ${ruleValue}`
+    )
+    formatter = null
+  }
+
+  const baseRenderer = Handsontable.renderers.getRenderer('text')
+
+  return (
+    instance: any,
+    td: any,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: any
+  ) => {
+    // Render via the base text renderer first to preserve cell styling/classes
+    // (readOnly, alignment, etc.), then override the displayed text.
+    baseRenderer(instance, td, row, col, prop, value, cellProperties)
+
+    const num = Number(value)
+    if (
+      formatter &&
+      value !== null &&
+      value !== undefined &&
+      value !== '' &&
+      !isNaN(num)
+    ) {
+      td.textContent = formatter.format(num)
+    }
+
+    return td
+  }
+}
+
 /**
  * Custom renderer for HOT cell
  * Used to show error icon

client/src/app/home/home.component.html

@@ -16,11 +16,13 @@
         <clr-icon
           *ngIf="searchLibTreeInput.value.length < 1"
           shape="search"
+          aria-hidden="true"
         ></clr-icon>
         <clr-icon
           *ngIf="searchLibTreeInput.value.length > 0"
           (click)="librariesSearch = ''; libraryOnFilter()"
           shape="times"
+          aria-label="Clear libraries search"
         ></clr-icon>
       </div>
     </clr-tree-node>
@@ -40,7 +42,7 @@
           "
           class="m-0 cursor-pointer"
         >
-          <clr-icon shape="rack-server"></clr-icon>
+          <clr-icon shape="rack-server" aria-hidden="true"></clr-icon>
           {{ library.LIBRARYREF }}
         </p>
 
@@ -60,6 +62,7 @@
             <clr-icon
               *ngIf="searchTreeInput.value.length < 1"
               shape="search"
+              aria-hidden="true"
             ></clr-icon>
             <clr-icon
               *ngIf="searchTreeInput.value.length > 0"
@@ -69,6 +72,7 @@
                 treeOnFilter(library, 'tables')
               "
               shape="times"
+              aria-label="Clear tables search"
             ></clr-icon>
           </div>
         </clr-tree-node>
@@ -90,8 +94,16 @@
               [class.active]="libTabActive(library.LIBRARYREF, libTable)"
             >
               <ng-container [ngSwitch]="libTable.includes('-FC')">
-                <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
-                <clr-icon *ngSwitchCase="false" shape="table"></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="true"
+                  shape="bolt"
+                  aria-hidden="true"
+                ></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="false"
+                  shape="table"
+                  aria-hidden="true"
+                ></clr-icon>
               </ng-container>
               {{ libTable.replace('-FC', '') }}
             </button>
@@ -114,7 +126,7 @@
   </clr-tree>
 </app-sidebar>
 
-<div class="content-area">
+<main class="content-area">
   <div class="card-block">
     <div *ngIf="loading" class="spinner-wrapper-fullpage">
       <div class="loadingSpinner">
@@ -144,4 +156,4 @@
       </p>
     </div>
   </div>
-</div>
+</main>

client/src/app/licensing/licensing.component.html

@@ -34,6 +34,8 @@
         </p>
       </ng-container>
 
+      <p><strong>Protocol:</strong> {{ protocol }}</p>
+
       <p>
         <strong>SYSSITE:</strong>
         <span

client/src/app/licensing/licensing.component.ts

@@ -35,6 +35,10 @@ export class LicensingComponent implements OnInit {
   public activationKeyValue: string = ''
 
   public applyingKeys: boolean = false
+  public protocol: string =
+    location.protocol === 'https:'
+      ? 'HTTPS - secure connection'
+      : 'HTTP - insecure connection'
 
   public syssite = this.appService.syssite
   public currentLicenceKey = this.licenceService.licenceKey

client/src/app/models/CellValidationSource.ts

@@ -6,4 +6,5 @@ export interface CellValidationSource {
   extended_values?: string[]
   hash: string
   count: number
+  pending?: Promise<void>
 }

client/src/app/multi-dataset/multi-dataset.component.html

@@ -127,6 +127,7 @@
       class="no-table-selected pointer-events-none"
     >
       <clr-icon
+        aria-hidden="true"
         shape="upload-cloud"
         size="40"
         class="is-info icon-dc-fill"
@@ -197,6 +198,7 @@
         >
           <ng-container *ngIf="fileLoadingState !== FileLoadingState.parsed">
             <clr-icon
+              aria-hidden="true"
               shape="process-on-vm"
               size="40"
               class="is-info icon-dc-fill"
@@ -209,6 +211,7 @@
 
           <ng-container *ngIf="fileLoadingState === FileLoadingState.parsed">
             <clr-icon
+              aria-hidden="true"
               shape="warning-standard"
               size="40"
               class="is-info icon-dc-fill"
@@ -372,6 +375,7 @@
           class="no-table-selected pointer-events-none"
         >
           <clr-icon
+            aria-hidden="true"
             shape="warning-standard"
             size="40"
             class="is-info icon-dc-fill"

client/src/app/multi-dataset/multi-dataset.component.ts

@@ -160,14 +160,16 @@ export class MultiDatasetComponent implements OnInit, AfterViewInit {
       filters: true,
       stretchH: 'all',
       afterGetColHeader: baseAfterGetColHeader,
-      modifyColWidth: this.maxWidthCheker
+      modifyColWidth: this.maxWidthCheker,
+      theme: 'ht-theme-classic'
     }
 
     // Exclude data from settings for HOT v16 - it will be loaded manually
     const { data, ...settingsWithoutData } = this.hotUserDatasets
     this.hotUserDatasetsSettings = {
       ...settingsWithoutData,
-      licenseKey: this.hotTableLicenseKey
+      licenseKey: this.hotTableLicenseKey,
+      theme: 'ht-theme-classic'
     }
   }
 

client/src/app/review/approve-details/approve-details.component.ts

@@ -1,4 +1,5 @@
 import { ActivatedRoute } from '@angular/router'
+import { sanitiseForSas } from '../../shared/utils/sanitise'
 import { SasStoreService } from '../../services/sas-store.service'
 import {
   Component,
@@ -136,7 +137,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
 
   public async rejecting() {
     this.rejectLoading = true
-    this.submitReason = this.submitReason.replace(/\n/g, '. ')
+    this.submitReason = sanitiseForSas(this.submitReason.replace(/\n/g, '. '))
 
     let rejParams = {
       STP_ACTION: 'REJECT_TABLE',

client/src/app/services/helper.service.spec.ts

@@ -0,0 +1,48 @@
+import { HelperService } from './helper.service'
+
+describe('HelperService - convertArrayValues', () => {
+  let service: HelperService
+
+  beforeEach(() => {
+    // convertArrayValues does not touch any injected dependency
+    service = new HelperService(null as any)
+  })
+
+  it('returns an empty array for empty input', () => {
+    expect(service.convertArrayValues([], 'string')).toEqual([])
+    expect(service.convertArrayValues([], 'number')).toEqual([])
+  })
+
+  it('coerces values to numbers for the numeric path', () => {
+    expect(service.convertArrayValues(['1', '2', '3'], 'number')).toEqual([
+      1, 2, 3
+    ])
+  })
+
+  it('coerces values to strings for the string path', () => {
+    expect(service.convertArrayValues([1, 2, 3], 'string')).toEqual([
+      '1',
+      '2',
+      '3'
+    ])
+  })
+
+  // Regression: a RAW_VALUE / dropdown source value that itself contains a
+  // comma must stay a single item. Previously `array.toString().split(',')`
+  // joined the array and re-split on every comma, shattering one value into
+  // several. Same bug that hit display_value lists.
+  it('keeps a single value containing commas intact (string path)', () => {
+    expect(service.convertArrayValues(['Smith, John'], 'string')).toEqual([
+      'Smith, John'
+    ])
+  })
+
+  it('does not split multiple comma-containing values into individual items', () => {
+    const source = ['Smith, John', 'Doe, Jane', 'Plain']
+
+    const result = service.convertArrayValues(source, 'string')
+
+    expect(result).toEqual(['Smith, John', 'Doe, Jane', 'Plain'])
+    expect(result.length).toBe(3)
+  })
+})

client/src/app/services/helper.service.ts

@@ -280,7 +280,7 @@ export class HelperService {
         return array.map((value) => value * 1)
       }
       case 'string': {
-        return array.toString().split(',')
+        return array.map((value) => `${value}`)
       }
     }
   }

client/src/app/services/licence.service.ts

@@ -170,15 +170,15 @@ export class LicenceService {
           errString
         )}&force=true`
         this.licenceProblem.next(url)
-        this.router.navigateByUrl(url)
 
         setTimeout(() => {
-          return this.applicationActivation(
+          this.applicationActivation(
             this.freeTierLicenceData,
             variables,
             startup_site_id,
             true
           )
+          this.router.navigateByUrl(url)
         })
       }
     )

client/src/app/services/sas-store.service.ts

@@ -155,13 +155,23 @@ export class SasStoreService {
       .adapterResponse
   }
 
+  private libsPromise: Promise<any> | null = null
+
   /**
    *
    * @returns All libraries
    */
-  public async viewLibs() {
-    return (await this.sasService.request('public/viewlibs', null))
-      .adapterResponse
+  public viewLibs() {
+    if (!this.libsPromise) {
+      this.libsPromise = this.sasService
+        .request('public/viewlibs', null)
+        .then((res: any) => res.adapterResponse)
+        .catch((err: any) => {
+          this.libsPromise = null
+          throw err
+        })
+    }
+    return this.libsPromise
   }
 
   public async refreshLibInfo(libref: string) {

client/src/app/services/sas.service.ts

@@ -641,6 +641,23 @@ export class SasService {
     this.sasjsAdapter.setDebugState(state)
   }
 
+  /**
+   * Returns the `&_debug=...` URL segment honoring the live adapter
+   * config. Empty string when debug is off. `128` on the Viya WEB JES path
+   * with `runAsTask` enabled, `131` otherwise.
+   */
+  public getDebugUrlParam(): string {
+    const config = this.sasjsAdapter.getSasjsConfig()
+    if (!config.debug) return ''
+    const value =
+      config.serverType === ServerType.SasViya &&
+      config.useComputeApi === null &&
+      config.runAsTask === true
+        ? 128
+        : 131
+    return `&_debug=${value}`
+  }
+
   public getSasjsInstance() {
     return this.sasjsAdapter
   }

client/src/app/shared/bulk-validation-modal/bulk-validation-modal.component.html

@@ -0,0 +1,26 @@
+<clr-modal
+  [clrModalOpen]="open"
+  [clrModalClosable]="false"
+  [clrModalStaticBackdrop]="true"
+  [clrModalSize]="'sm'"
+>
+  <h3 class="modal-title">Validating cells</h3>
+  <div class="modal-body bulk-validation-body">
+    <div class="bulk-validation-row">
+      <clr-spinner clrSmall></clr-spinner>
+      <span class="bulk-validation-text">
+        Validating {{ done }} / {{ total }}…
+      </span>
+    </div>
+    <clr-progress-bar
+      class="bulk-validation-progress"
+      [clrValue]="done"
+      [clrMax]="total"
+    ></clr-progress-bar>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="onCancel()">
+      Cancel
+    </button>
+  </div>
+</clr-modal>

client/src/app/shared/bulk-validation-modal/bulk-validation-modal.component.scss

@@ -0,0 +1,19 @@
+.bulk-validation-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .bulk-validation-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .bulk-validation-text {
+    flex: 1 1 auto;
+  }
+
+  .bulk-validation-progress {
+    margin: 0;
+  }
+}

client/src/app/shared/bulk-validation-modal/bulk-validation-modal.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+
+@Component({
+  selector: 'app-bulk-validation-modal',
+  templateUrl: './bulk-validation-modal.component.html',
+  styleUrls: ['./bulk-validation-modal.component.scss'],
+  standalone: false
+})
+export class BulkValidationModalComponent {
+  @Input() open = false
+  @Input() done = 0
+  @Input() total = 0
+
+  @Output() cancel = new EventEmitter<void>()
+
+  onCancel() {
+    this.cancel.emit()
+  }
+}

client/src/app/shared/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,18 @@
+<clr-modal
+  [clrModalOpen]="open"
+  (clrModalOpenChange)="onClrModalOpenChange($event)"
+  [clrModalSize]="'md'"
+>
+  <h3 class="modal-title">{{ title }}</h3>
+  <div class="modal-body">
+    <div>{{ message }}</div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="onCancel()">
+      {{ cancelText }}
+    </button>
+    <button type="button" class="btn btn-primary" (click)="onConfirm()">
+      {{ confirmText }}
+    </button>
+  </div>
+</clr-modal>

client/src/app/shared/confirm-modal/confirm-modal.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+
+@Component({
+  selector: 'app-confirm-modal',
+  templateUrl: './confirm-modal.component.html',
+  standalone: false
+})
+export class ConfirmModalComponent {
+  @Input() open = false
+  @Input() title = 'Confirm'
+  @Input() message = ''
+  @Input() confirmText = 'Yes'
+  @Input() cancelText = 'No'
+
+  @Output() result = new EventEmitter<boolean>()
+
+  onConfirm() {
+    this.result.emit(true)
+  }
+
+  onCancel() {
+    this.result.emit(false)
+  }
+
+  onClrModalOpenChange(value: boolean) {
+    // Close triggered by X / outside / Esc — treat as cancel. Only emit
+    // when modal was actually open (avoid double-emit when parent closes
+    // us via [open]=false in response to the Yes/No button).
+    if (!value && this.open) this.result.emit(false)
+  }
+}

client/src/app/shared/dc-validator/cellTypes/intlCellTypes.ts

@@ -0,0 +1,101 @@
+import Handsontable from 'handsontable'
+import { datetimeValidator } from '../validations/hot-custom-validators'
+import { DATETIME_FORMAT } from '../utils/mapIntlCellTypes'
+
+/**
+ * Cell types for the date/time/datetime columns after the HOT 17 migration.
+ *
+ * `date` and `time` use Handsontable's BUILT-IN `intl-date` / `intl-time` cell
+ * types as-is — a native (browser/OS) picker editor plus the Intl renderer that
+ * formats the displayed value per the cell's `locale` + `dateFormat`/`timeFormat`
+ * (set as cell meta in mapIntlCellTypes). They are intentionally NOT re-registered
+ * here, so their localizing `valueFormatter` stays active. The stored/submitted
+ * value remains the raw ISO string; only the display is localized.
+ *
+ * Only `intl-datetime` needs registering — HOT has no built-in datetime type. It
+ * pairs a native `datetime-local` picker with a `valueFormatter` that formats the
+ * stored `YYYY-MM-DD HH:mm:ss` per the cell's locale (mirroring how the built-in
+ * intl-date/intl-time types localize, via tableView's `renderer.valueFormatter`).
+ */
+
+const SPACE_ISO = /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}(?::\d{2})?)$/
+
+const BaseTextEditor = Handsontable.editors.getEditor('text') as any
+const baseTextRenderer = Handsontable.renderers.getRenderer('text')
+
+class IntlDatetimeEditor extends BaseTextEditor {
+  createElements() {
+    super.createElements('input')
+    this.TEXTAREA.setAttribute('type', 'datetime-local')
+    this.TEXTAREA.setAttribute('step', '1') // allow seconds
+  }
+
+  // Stored `YYYY-MM-DD HH:mm:ss` → native input `YYYY-MM-DDTHH:mm:ss`.
+  setValue(value: any) {
+    const match = typeof value === 'string' ? value.match(SPACE_ISO) : null
+    super.setValue(match ? `${match[1]}T${match[2]}` : value)
+  }
+
+  // Native input `YYYY-MM-DDTHH:mm[:ss]` → stored `YYYY-MM-DD HH:mm:ss`.
+  getValue() {
+    const raw: string = super.getValue()
+    if (typeof raw !== 'string' || raw.indexOf('T') === -1) return raw
+    const [date, time] = raw.split('T')
+    const withSeconds = time.length === 5 ? `${time}:00` : time // pad HH:mm
+    return `${date} ${withSeconds}`
+  }
+
+  open() {
+    super.open()
+    try {
+      this.TEXTAREA.showPicker()
+    } catch {
+      /* showPicker requires a user gesture; ignore when called programmatically */
+    }
+  }
+
+  // The base text editor's focus() calls select() + setSelectionRange to place
+  // the caret, but a native `datetime-local` input does not support text
+  // selection and throws `InvalidStateError`. Just focus the input.
+  focus() {
+    this.TEXTAREA.focus()
+  }
+}
+
+/**
+ * Localizes a stored `YYYY-MM-DD HH:mm:ss` datetime per the cell's locale.
+ * Invoked by Handsontable via `renderer.valueFormatter` (tableView) before the
+ * text renderer paints the cell, so the stored value is never mutated. Falls
+ * back to the raw value when it is empty or unparseable.
+ */
+function intlDatetimeValueFormatter(value: any, cellProperties: any): any {
+  if (typeof value !== 'string') return value
+
+  const match = value.match(SPACE_ISO)
+  if (!match) return value
+
+  const date = new Date(`${match[1]}T${match[2]}`)
+  if (isNaN(date.getTime())) return value
+
+  const options: Intl.DateTimeFormatOptions =
+    cellProperties.datetimeFormat || DATETIME_FORMAT
+  const locale = cellProperties.locale || window.navigator.language
+
+  return new Intl.DateTimeFormat(locale, options).format(date)
+}
+
+/**
+ * Registers the `intl-datetime` cell type. Idempotent — safe to call per
+ * DcValidator construction. `intl-date`/`intl-time` are not registered here;
+ * the built-in HOT types are used directly.
+ */
+export const registerIntlCellTypes = () => {
+  Handsontable.cellTypes.registerCellType('intl-datetime', {
+    // IntlDatetimeEditor extends the (loosely-typed) text editor returned by
+    // getEditor('text'); cast to satisfy registerCellType's editor signature.
+    editor: IntlDatetimeEditor as any,
+    renderer: baseTextRenderer,
+    validator: datetimeValidator,
+    valueFormatter: intlDatetimeValueFormatter
+  } as any)
+}

client/src/app/shared/dc-validator/dc-validator.ts

@@ -3,8 +3,8 @@ import Handsontable from 'handsontable'
 import { CellProperties } from 'handsontable/settings'
 import {
   autocompleteValidator,
-  dateValidator,
-  timeValidator
+  intlDateValidator,
+  intlTimeValidator
 } from 'handsontable/validators'
 import { $DataFormats } from 'src/app/models/sas/editors-getdata.model'
 import { DQData, SASParam } from '../../models/TableData'
@@ -19,9 +19,15 @@ import { getNotNullDefault } from './utils/getNotNullDefault'
 import { mergeColsRules } from './utils/mergeColsRules'
 import { parseColType } from './utils/parseColType'
 import { dqValidate } from './validations/dq-validation'
-import { specialMissingNumericValidator } from './validations/hot-custom-validators'
+import {
+  datetimeValidator,
+  specialMissingNumericValidator
+} from './validations/hot-custom-validators'
 import { applyNumericFormats } from './utils/applyNumericFormats'
+import { mapIntlCellTypes } from './utils/mapIntlCellTypes'
 import { CustomAutocompleteEditor } from './editors/numericAutocomplete'
+import { registerIntlCellTypes } from './cellTypes/intlCellTypes'
+import { makeNumberFormatRenderer } from '../../editor/utils/renderers.utils'
 
 export class DcValidator {
   private rules: DcValidation[] = []
@@ -47,6 +53,7 @@ export class DcValidator {
     this.rules = parseColType(sasparams.COLTYPE)
     this.rules = mergeColsRules(cols, this.rules, $dataFormats)
     this.rules = applyNumericFormats(this.rules)
+    this.rules = mapIntlCellTypes(this.rules)
     this.dqrules = dqRules
     this.dqdata = dqData
     this.primaryKeys = sasparams.PK.split(' ')
@@ -60,6 +67,7 @@ export class DcValidator {
       'autocomplete.custom',
       CustomAutocompleteEditor
     )
+    registerIntlCellTypes()
   }
 
   getRules(): DcValidation[] {
@@ -147,6 +155,25 @@ export class DcValidator {
     return getNotNullDefault(col, this.dqrules, colRule?.type)
   }
 
+  /**
+   * Returns the num_digits for a ROUND rule on the given column, used to
+   * round edited/pasted values Excel-style. Returns undefined if no ROUND
+   * rule exists or its RULE_VALUE is not an integer.
+   *
+   * @param col column name
+   */
+  getRoundDigits(col: string): number | undefined {
+    const roundRule = this.dqrules.find(
+      (rule: DQRule) => rule.BASE_COL === col && rule.RULE_TYPE === 'ROUND'
+    )
+
+    if (!roundRule) return undefined
+
+    const digits = parseInt(roundRule.RULE_VALUE, 10)
+
+    return isNaN(digits) ? undefined : digits
+  }
+
   /**
    * Retrieves dropdown source for given dc validation rule
    * The values comes from MPE_SELECTBOX table
@@ -238,7 +265,6 @@ export class DcValidator {
     const cellProperties: CellProperties = {
       ...columnRules,
       validator: undefined,
-      correctFormat: false,
       row: 0,
       col: 0,
       instance: new Handsontable(document.createElement('div'), {}),
@@ -284,10 +310,18 @@ export class DcValidator {
         )
 
         if (source.length > 0) {
+          // For SAS num cols keep type='numeric' so HOT's numericEditor /
+          // numericRenderer + numbro coercion stay alive — same per-column
+          // model as the per-cell pattern in
+          // editor.component.ts:reSetCellValidationValues().
           this.rules[i].source = source
-          this.rules[i].type = 'autocomplete'
           this.rules[i].editor = 'autocomplete.custom'
+          this.rules[i].renderer = 'autocomplete'
           this.rules[i].filter = false
+
+          if (this.rules[i].sasType !== 'num') {
+            this.rules[i].type = 'autocomplete'
+          }
         }
 
         if (this.hasDqRules(ruleColName, ['SOFTSELECT'])) {
@@ -309,11 +343,31 @@ export class DcValidator {
         if (this.hasDqRules(ruleColName, ['NOTNULL'])) {
           this.rules[i].allowEmpty = false
         }
-      }
 
-      // Correct format comes as STRING from SAS. That could be also fixed on SAS side.
-      if ((this.rules[i].correctFormat as any) === 'true') {
-        this.rules[i].correctFormat = true
+        // READONLY: render column read-only (default value handled via getColumnDefault on add row)
+        if (this.hasDqRules(ruleColName, ['READONLY'])) {
+          this.rules[i].readOnly = true
+        }
+
+        // HIDDEN: hide column in HOT but keep its data (still submitted via hot.getData())
+        if (this.hasDqRules(ruleColName, ['HIDDEN'])) {
+          this.hiddenColumns.push(i)
+        }
+
+        // NUMBER_FORMAT: display-only Intl.NumberFormat renderer.
+        // Set last so it overrides a dropdown's 'autocomplete' renderer (last-wins).
+        if (this.hasDqRules(ruleColName, ['NUMBER_FORMAT'])) {
+          const fmtRule = this.getDqDetails(ruleColName).find(
+            (rule: DQRule) => rule.RULE_TYPE === 'NUMBER_FORMAT'
+          )
+          this.rules[i].renderer = makeNumberFormatRenderer(fmtRule?.RULE_VALUE)
+          // Clear numericFormat (set by applyNumericFormats on every numeric
+          // column). On a numeric cell HOT's built-in numeric renderer would
+          // re-format via numericFormat, overriding our custom NUMBER_FORMAT
+          // Intl renderer and dropping the currency symbol. The numeric
+          // editor/validator stay intact via `type`.
+          this.rules[i].numericFormat = undefined
+        }
       }
 
       const self = this
@@ -455,10 +509,12 @@ export class DcValidator {
         return autocompleteValidator
       case 'numeric':
         return specialMissingNumericValidator
-      case 'date':
-        return dateValidator
-      case 'time':
-        return timeValidator
+      case 'intl-date':
+        return intlDateValidator
+      case 'intl-time':
+        return intlTimeValidator
+      case 'intl-datetime':
+        return datetimeValidator
       default:
         return (value: any, callback: any) => (callback ? callback(true) : null)
     }

client/src/app/shared/dc-validator/models/dc-validation.model.ts

@@ -10,6 +10,9 @@ export interface DcColumnSettings {
   valid?: boolean
   desc?: string
   clsRule?: string
+  // SAS-side column type from $dataFormats (e.g. 'num', 'char') — distinct
+  // from Handsontable's `type` which drives renderer/editor selection
+  sasType?: string
 }
 
 export interface DcValidation extends HotColumnSettings, DcColumnSettings {}

client/src/app/shared/dc-validator/models/dq-rules.model.ts

@@ -14,3 +14,7 @@ export type DQRuleTypes =
   | 'CASE'
   | 'MINVAL'
   | 'MAXVAL'
+  | 'READONLY'
+  | 'HIDDEN'
+  | 'ROUND'
+  | 'NUMBER_FORMAT'

client/src/app/shared/dc-validator/tests/dc-validator.spec.ts

@@ -34,10 +34,27 @@ describe('DC Validator', () => {
     // Check allowEmpty - it is notnull rule so allowEmpty should be false
     expect(someNumRule?.allowEmpty).toBeFalse()
 
-    // Get col with notnull validation
+    // SAS sends semantic date/time/datetime column types; the frontend maps them
+    // to the HOT 17 Intl cell types and attaches locale + Intl format meta so the
+    // cell display is localized (see mapIntlCellTypes). The deprecated
+    // correctFormat + moment format strings are no longer sent in the payload.
     const someDateRule = dcValidator.getRule('SOME_DATE')
-    // Check correctFormat - it comes from SAS - should be true
-    expect(someDateRule?.correctFormat).toBeTrue()
+    expect(someDateRule?.correctFormat).toBeUndefined()
+    expect(someDateRule?.type).toBe('intl-date')
+    expect(someDateRule?.dateFormat).toBeDefined()
+    expect((someDateRule as any)?.locale).toBeTruthy()
+
+    const someDatetimeRule = dcValidator.getRule('SOME_DATETIME')
+    expect(someDatetimeRule?.type).toBe('intl-datetime')
+    expect(someDatetimeRule?.correctFormat).toBeUndefined()
+    expect((someDatetimeRule as any)?.datetimeFormat).toBeDefined()
+    expect((someDatetimeRule as any)?.locale).toBeTruthy()
+
+    const someTimeRule = dcValidator.getRule('SOME_TIME')
+    expect(someTimeRule?.type).toBe('intl-time')
+    expect(someTimeRule?.correctFormat).toBeUndefined()
+    expect((someTimeRule as any)?.timeFormat).toBeDefined()
+    expect((someTimeRule as any)?.locale).toBeTruthy()
 
     // Get col with dropdown, check if merging sas data is correct
     const someDropdownRule = dcValidator.getRule('SOME_DROPDOWN')
@@ -235,6 +252,37 @@ describe('DC Validator', () => {
       }
     )
   })
+
+  it('should apply READONLY, HIDDEN, NUMBER_FORMAT and ROUND rules', () => {
+    const dcValidator: DcValidator = new DcValidator(
+      example_sasparams,
+      example_dataformats,
+      example_cols,
+      example_dqRules,
+      example_dqData
+    )
+
+    // READONLY -> column rendered read-only
+    expect(dcValidator.getRule('SOME_BESTNUM')?.readOnly).toBeTrue()
+
+    // NUMBER_FORMAT -> a function renderer is assigned and numbro numericFormat
+    // is cleared so it can't override the Intl currency/percent rendering
+    expect(typeof dcValidator.getRule('SOME_BESTNUM')?.renderer).toEqual(
+      'function'
+    )
+    expect(dcValidator.getRule('SOME_BESTNUM')?.numericFormat).toBeUndefined()
+
+    // HIDDEN -> column index added to hidden columns
+    const rules = dcValidator.getRules()
+    const hiddenIndex = rules.findIndex(
+      (rule) => rule.data === 'PRIMARY_KEY_FIELD'
+    )
+    expect(dcValidator.getHiddenColumns()).toContain(hiddenIndex)
+
+    // ROUND -> num_digits returned for the column, undefined otherwise
+    expect(dcValidator.getRoundDigits('SOME_SHORTNUM')).toEqual(2)
+    expect(dcValidator.getRoundDigits('SOME_NUM')).toBeUndefined()
+  })
 })
 
 const example_dqData = [
@@ -313,6 +361,30 @@ const example_dqRules: any = [
     RULE_TYPE: 'CASE',
     RULE_VALUE: 'LOWCASE',
     X: 0
+  },
+  {
+    BASE_COL: 'SOME_BESTNUM',
+    RULE_TYPE: 'READONLY',
+    RULE_VALUE: '7',
+    X: 0
+  },
+  {
+    BASE_COL: 'SOME_BESTNUM',
+    RULE_TYPE: 'NUMBER_FORMAT',
+    RULE_VALUE: '{"minimumFractionDigits":2}',
+    X: 0
+  },
+  {
+    BASE_COL: 'PRIMARY_KEY_FIELD',
+    RULE_TYPE: 'HIDDEN',
+    RULE_VALUE: '99',
+    X: 0
+  },
+  {
+    BASE_COL: 'SOME_SHORTNUM',
+    RULE_TYPE: 'ROUND',
+    RULE_VALUE: '2',
+    X: 0
   }
 ]
 
@@ -379,21 +451,15 @@ const example_COLTYPE = `
 },
 {
     "data":"SOME_DATE",
-    "type":"date",
-    "dateFormat":"YYYY-MM-DD",
-    "correctFormat":"true"
+    "type":"date"
 },
 {
     "data":"SOME_DATETIME",
-    "type":"date",
-    "dateFormat":"YYYY-MM-DD HH:mm:ss.SSS",
-    "correctFormat":"true"
+    "type":"datetime"
 },
 {
     "data":"SOME_TIME",
-    "type":"time",
-    "timeFormat":"HH:mm:ss.SSS",
-    "correctFormat":"true"
+    "type":"time"
 },
 {
     "data":"SOME_SHORTNUM",

client/src/app/shared/dc-validator/tests/excelRound.spec.ts

@@ -0,0 +1,39 @@
+import { excelRound } from '../utils/excelRound'
+
+describe('DC Validator - excelRound', () => {
+  it('should round to the given number of decimal places', () => {
+    expect(excelRound(1.23456, 2)).toEqual(1.23)
+    expect(excelRound(1.236, 2)).toEqual(1.24)
+    expect(excelRound(2.5, 0)).toEqual(3)
+  })
+
+  it('should round half away from zero for negative values', () => {
+    expect(excelRound(-0.5, 0)).toEqual(-1)
+    expect(excelRound(-2.5, 0)).toEqual(-3)
+    expect(excelRound(-1.23456, 2)).toEqual(-1.23)
+  })
+
+  it('should support negative digits (round to tens/hundreds)', () => {
+    expect(excelRound(25, -1)).toEqual(30)
+    expect(excelRound(24, -1)).toEqual(20)
+    expect(excelRound(150, -2)).toEqual(200)
+  })
+
+  // Examples from Microsoft's ROUND documentation:
+  // https://support.microsoft.com/en-us/office/round-function-c018c5d8-40fb-4053-90b1-b3e7f61a213c
+  it('should match the Microsoft ROUND examples', () => {
+    expect(excelRound(2.15, 1)).toEqual(2.2)
+    expect(excelRound(2.149, 1)).toEqual(2.1)
+    expect(excelRound(-1.475, 2)).toEqual(-1.48)
+    expect(excelRound(21.5, -1)).toEqual(20)
+    expect(excelRound(626.3, -3)).toEqual(1000)
+    expect(excelRound(1.98, -1)).toEqual(0)
+    expect(excelRound(-50.55, -2)).toEqual(-100)
+  })
+
+  it('should return the original value when not finite', () => {
+    expect(excelRound(NaN, 2)).toBeNaN()
+    expect(excelRound(Infinity, 2)).toEqual(Infinity)
+    expect(excelRound(5, NaN)).toEqual(5)
+  })
+})

client/src/app/shared/dc-validator/tests/getColumnDefault.spec.ts

@@ -0,0 +1,40 @@
+import { DQRule } from '../models/dq-rules.model'
+import { getColumnDefault } from '../utils/getColumnDefault'
+
+describe('DC Validator - getColumnDefault', () => {
+  const dqRules: DQRule[] = [
+    { BASE_COL: 'NOTNULL_COL', RULE_TYPE: 'NOTNULL', RULE_VALUE: 'nn', X: 1 },
+    { BASE_COL: 'READONLY_COL', RULE_TYPE: 'READONLY', RULE_VALUE: 'ro', X: 1 },
+    { BASE_COL: 'HIDDEN_COL', RULE_TYPE: 'HIDDEN', RULE_VALUE: 'hd', X: 1 },
+    { BASE_COL: 'NUM_COL', RULE_TYPE: 'READONLY', RULE_VALUE: '42', X: 1 },
+    { BASE_COL: 'EMPTY_COL', RULE_TYPE: 'HIDDEN', RULE_VALUE: '  ', X: 1 },
+    { BASE_COL: 'OTHER_COL', RULE_TYPE: 'HARDSELECT', RULE_VALUE: 'x', X: 1 }
+  ]
+
+  it('should return defaults for NOTNULL, READONLY and HIDDEN rules', () => {
+    expect(getColumnDefault('NOTNULL_COL', dqRules, 'text')).toEqual('nn')
+    expect(getColumnDefault('READONLY_COL', dqRules, 'text')).toEqual('ro')
+    expect(getColumnDefault('HIDDEN_COL', dqRules, 'text')).toEqual('hd')
+  })
+
+  it('should coerce to number for numeric columns', () => {
+    expect(getColumnDefault('NUM_COL', dqRules, 'numeric')).toEqual(42)
+  })
+
+  it('should return string for numeric columns when value is non-numeric', () => {
+    expect(getColumnDefault('READONLY_COL', dqRules, 'numeric')).toEqual('ro')
+  })
+
+  it('should ignore empty RULE_VALUE', () => {
+    expect(getColumnDefault('EMPTY_COL', dqRules, 'text')).toBeUndefined()
+  })
+
+  it('should return undefined for rules that do not provide defaults', () => {
+    expect(getColumnDefault('OTHER_COL', dqRules, 'text')).toBeUndefined()
+  })
+
+  it('should return undefined for non-existent columns and empty rules', () => {
+    expect(getColumnDefault('MISSING', dqRules, 'text')).toBeUndefined()
+    expect(getColumnDefault('NOTNULL_COL', [], 'text')).toBeUndefined()
+  })
+})

client/src/app/shared/dc-validator/tests/mergeSpecRules.spec.ts

@@ -38,11 +38,52 @@ describe('DC Validator - merge spec rules', () => {
         data: 'test_col',
         desc: 'test_desc',
         clsRule: 'cls_rule',
-        length: 8
+        length: 8,
+        sasType: 'test_type'
       }
     ]
 
     expect(mergeColsRules(cols, rules, $dataFormats)).toEqual(expected)
     expect(cols[0].TYPE).toEqual('test_type')
   })
+
+  it('should populate sasType for num and char cols', () => {
+    const rules: DcValidation[] = [{ data: 'num_col' }, { data: 'char_col' }]
+    const cols: Col[] = [
+      {
+        NAME: 'num_col',
+        MEMLABEL: '',
+        DESC: '',
+        LONGDESC: '',
+        TYPE: '',
+        CLS_RULE: '',
+        VARNUM: 0,
+        LABEL: '',
+        FMTNAME: '',
+        DDTYPE: ''
+      },
+      {
+        NAME: 'char_col',
+        MEMLABEL: '',
+        DESC: '',
+        LONGDESC: '',
+        TYPE: '',
+        CLS_RULE: '',
+        VARNUM: 0,
+        LABEL: '',
+        FMTNAME: '',
+        DDTYPE: ''
+      }
+    ]
+    const $dataFormats: any = {
+      vars: {
+        num_col: { format: 'best.', label: '', length: '8', type: 'num' },
+        char_col: { format: '$32.', label: '', length: '32', type: 'char' }
+      }
+    }
+
+    const merged = mergeColsRules(cols, rules, $dataFormats)
+    expect(merged.find((r) => r.data === 'num_col')?.sasType).toEqual('num')
+    expect(merged.find((r) => r.data === 'char_col')?.sasType).toEqual('char')
+  })
 })

client/src/app/shared/dc-validator/utils/applyNumericFormats.ts

@@ -1,25 +1,22 @@
 import { DcValidation } from '../models/dc-validation.model'
-import * as languages from 'numbro/dist/languages.min'
 /**
  * Applying the numeric formats based on the browser locale/language
  * So that correct decimal separators are applied.
  * For example european format (thousand dot, decimal comma): 1.000,00
  *
+ * Uses Intl.NumberFormat options (HOT 17+) instead of the deprecated numbro
+ * `pattern`/`culture`. `maximumFractionDigits: 20` preserves all natural
+ * decimals (Intl's default of 3 would round); `locale` replaces `culture`.
+ *
  * @param rules Cell Validation rules to be updated
  * Those rules are passed in the `columns` property Of handsontable settings.
  */
 export const applyNumericFormats = (rules: DcValidation[]): DcValidation[] => {
-  const lang = languages[window.navigator.language]
-
-  if (!lang) return rules
-
   for (let rule of rules) {
-    if (rule.type === 'numeric')
-      rule.numericFormat = {
-        pattern: '0,0',
-        culture: window.navigator.language // use this for EUR (German),
-        // more cultures available on http://numbrojs.com/languages.html
-      }
+    if (rule.type === 'numeric') {
+      rule.numericFormat = { useGrouping: true, maximumFractionDigits: 20 }
+      rule.locale = window.navigator.language
+    }
   }
 
   return rules

client/src/app/shared/dc-validator/utils/excelRound.ts

@@ -0,0 +1,16 @@
+/**
+ * Rounds a number like Excel's ROUND(number, num_digits):
+ * - rounds half away from zero (so ROUND(-0.5) === -1, ROUND(2.5) === 3)
+ * - supports negative `digits` (e.g. -1 rounds to the nearest ten)
+ *
+ * @param value number to round
+ * @param digits number of decimal places (may be negative)
+ * @returns the rounded number, or the original value if it is not finite
+ */
+export function excelRound(value: number, digits: number): number {
+  if (!isFinite(value) || !isFinite(digits)) return value
+
+  const factor = Math.pow(10, digits)
+
+  return (Math.sign(value) * Math.round(Math.abs(value) * factor)) / factor
+}

client/src/app/shared/dc-validator/utils/getColumnDefault.ts

@@ -0,0 +1,44 @@
+import { DQRule, DQRuleTypes } from '../models/dq-rules.model'
+
+/**
+ * Rule types whose RULE_VALUE supplies the default value inserted into a cell
+ * when a new row is added. Checked in priority order.
+ */
+const DEFAULT_VALUE_RULE_TYPES: DQRuleTypes[] = [
+  'NOTNULL',
+  'READONLY',
+  'HIDDEN'
+]
+
+/**
+ * Returns the default value for a column from DQ rules, used to pre-fill cells
+ * when a new row is added. Looks for the first non-empty RULE_VALUE among
+ * NOTNULL, READONLY and HIDDEN rules. Converts to number for numeric columns.
+ *
+ * @param colName column name to look up
+ * @param dqRules array of DQ rules
+ * @param colType column type (e.g., 'numeric', 'text')
+ * @returns default value (string or number) if a default-providing rule exists
+ *          with a non-empty value, otherwise undefined
+ */
+export function getColumnDefault(
+  colName: string,
+  dqRules: DQRule[],
+  colType?: string
+): string | number | undefined {
+  const rule = dqRules.find(
+    (rule: DQRule) =>
+      rule.BASE_COL === colName &&
+      DEFAULT_VALUE_RULE_TYPES.includes(rule.RULE_TYPE) &&
+      rule.RULE_VALUE != null &&
+      rule.RULE_VALUE.trim().length > 0
+  )
+
+  if (!rule) return undefined
+
+  if (colType === 'numeric' && !isNaN(Number(rule.RULE_VALUE))) {
+    return Number(rule.RULE_VALUE)
+  }
+
+  return rule.RULE_VALUE
+}

client/src/app/shared/dc-validator/utils/getHotDataSchema.ts

@@ -1,6 +1,6 @@
 import { DcValidation } from '../models/dc-validation.model'
 import { DQRule } from '../models/dq-rules.model'
-import { getNotNullDefault } from './getNotNullDefault'
+import { getColumnDefault } from './getColumnDefault'
 
 const schemaTypeMap: { [key: string]: any } = {
   numeric: '',
@@ -9,16 +9,16 @@ const schemaTypeMap: { [key: string]: any } = {
 
 /**
  * Schema defines the default values for given types. For example when new row is added.
- * Priority: NOTNULL RULE_VALUE > autocomplete first option > type default
+ * Priority: NOTNULL/READONLY/HIDDEN RULE_VALUE > autocomplete first option > type default
  */
 export function getHotDataSchema(
   type: string | undefined,
   cellValidation?: DcValidation,
   dqRules?: DQRule[]
 ): any {
-  // Check for NOTNULL default first
+  // Check for a rule-supplied default (NOTNULL/READONLY/HIDDEN) first
   if (dqRules && cellValidation?.data) {
-    const defaultValue = getNotNullDefault(cellValidation.data, dqRules, type)
+    const defaultValue = getColumnDefault(cellValidation.data, dqRules, type)
     if (defaultValue !== undefined) {
       return defaultValue
     }

client/src/app/shared/dc-validator/utils/mapIntlCellTypes.ts

@@ -0,0 +1,60 @@
+import { DcValidation } from '../models/dc-validation.model'
+
+/**
+ * Maps SAS' semantic date/time/datetime column types to the HOT 17 Intl cell
+ * types and attaches the locale + Intl format meta that drive their display.
+ *
+ * SAS sends a HOT-agnostic flag (`date`/`time`/`datetime`); the frontend owns
+ * the HOT-specific cell-type names and the locale-aware rendering:
+ *
+ * - `date`     → `intl-date`     (native date picker; display via Intl `dateFormat`)
+ * - `time`     → `intl-time`     (native time picker; display via Intl `timeFormat`)
+ * - `datetime` → `intl-datetime` (native datetime-local picker; display via `datetimeFormat`)
+ *
+ * The cell display is localized to `navigator.language` (the browser/OS locale);
+ * the stored/submitted value stays the raw ISO string. Second precision is kept
+ * for time/datetime so SAS time/datetime values are not truncated. Runs in the
+ * DcValidator constructor, before the rules reach Handsontable. See
+ * registerIntlCellTypes for the editors/validators these resolve to.
+ *
+ * @param rules Cell validation rules passed to Handsontable's `columns`.
+ */
+const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit'
+}
+
+const TIME_FORMAT: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+}
+
+export const DATETIME_FORMAT: Intl.DateTimeFormatOptions = {
+  ...DATE_FORMAT,
+  ...TIME_FORMAT
+}
+
+const INTL_TYPE_MAP: Record<
+  string,
+  { type: string; meta: Record<string, unknown> }
+> = {
+  date: { type: 'intl-date', meta: { dateFormat: DATE_FORMAT } },
+  time: { type: 'intl-time', meta: { timeFormat: TIME_FORMAT } },
+  datetime: { type: 'intl-datetime', meta: { datetimeFormat: DATETIME_FORMAT } }
+}
+
+export const mapIntlCellTypes = (rules: DcValidation[]): DcValidation[] => {
+  for (const rule of rules) {
+    const cfg = rule.type ? INTL_TYPE_MAP[rule.type as string] : undefined
+    if (!cfg) continue
+
+    rule.type = cfg.type
+    const meta = rule as Record<string, unknown>
+    meta.locale = window.navigator.language
+    Object.assign(meta, cfg.meta)
+  }
+
+  return rules
+}

client/src/app/shared/dc-validator/utils/mergeColsRules.ts

@@ -29,6 +29,7 @@ export const mergeColsRules = (
     if (rule && col.DESC) rule.desc = col.DESC
     if (rule && colFormats.length) rule.length = parseInt(colFormats.length)
     if (rule && col.CLS_RULE) rule.clsRule = col.CLS_RULE
+    if (rule && colFormats?.type) rule.sasType = colFormats.type
   }
 
   return rules

client/src/app/shared/dc-validator/validations/hot-custom-validators.ts

@@ -22,3 +22,26 @@ export function specialMissingNumericValidator(
   if (callback) callback(valid)
   return valid
 }
+
+const DATETIME_REGEX = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/
+
+/**
+ * Validator for the custom `intl-datetime` cell type. Expects SAS' ISO datetime
+ * form `YYYY-MM-DD HH:mm:ss`. Mirrors HOT's intl validators by honouring
+ * `this.allowEmpty` for blank values. Bound by HOT to the cell properties, so
+ * `this` carries `allowEmpty`.
+ */
+export function datetimeValidator(
+  this: { allowEmpty?: boolean } | void,
+  value: any,
+  callback: (valid: boolean) => void
+) {
+  const allowEmpty = (this as { allowEmpty?: boolean })?.allowEmpty ?? true
+
+  if (value === undefined || value === null || value === '') {
+    callback(allowEmpty)
+    return
+  }
+
+  callback(typeof value === 'string' && DATETIME_REGEX.test(value))
+}

client/src/app/shared/hot-export/hot-export.util.ts

@@ -0,0 +1,171 @@
+import Handsontable from 'handsontable'
+import { MenuItemConfig } from 'handsontable/plugins/contextMenu'
+
+export type HotExportFormat = 'csv' | 'xlsx'
+
+/**
+ * Cell types whose values must be exported as raw stored strings rather than
+ * converted to native Excel date/time cells. SAS raw data is the canonical
+ * representation, so dates/times are exported exactly as the grid stores them.
+ * `numeric` is intentionally NOT listed — it stays a native Excel number.
+ */
+const RAW_EXPORT_TYPES = new Set([
+  'date',
+  'time',
+  'datetime',
+  'intl-date',
+  'intl-time',
+  'intl-datetime'
+])
+
+/**
+ * Client-side export of a Handsontable grid's current view via the built-in
+ * `exportFile` plugin. Exports the current selection if one exists, otherwise
+ * the whole grid. This is a "what you see" convenience export and is distinct
+ * from any server-side (SAS) download.
+ *
+ * @param hot Live Handsontable instance.
+ * @param format `'csv'` or `'xlsx'`.
+ * @param filename File name (without extension).
+ * @param skipLeadingCols Number of leading UI/housekeeping columns to exclude
+ *   (e.g. the editor's `Delete?` column at index 0).
+ */
+export async function exportGrid(
+  hot: Handsontable,
+  format: HotExportFormat,
+  filename: string,
+  skipLeadingCols = 0
+): Promise<void> {
+  const plugin = hot.getPlugin('exportFile')
+
+  const opts: Record<string, any> = {
+    filename: filename || 'export',
+    colHeaders: true
+  }
+
+  // Selection-aware, contiguous range (visual indexes). Hidden columns are
+  // excluded automatically (exportHiddenColumns defaults to false).
+  const sel = hot.getSelectedRangeLast()
+  const lastRow = hot.countRows() - 1
+  const lastCol = hot.countCols() - 1
+
+  // Mirror HOT's own export item: only honor a selection that spans more than
+  // one cell. A right-click places a single-cell cursor, and the corner click
+  // is select-all (negative coords) — both mean "export the whole table".
+  const isCornerSelectAll = !!sel && sel.from.row < 0 && sel.from.col < 0
+  if (sel && !sel.isSingleCell() && !isCornerSelectAll) {
+    const top = Math.max(0, Math.min(sel.from.row, sel.to.row))
+    const left = Math.max(0, Math.min(sel.from.col, sel.to.col))
+    const bottom = Math.max(sel.from.row, sel.to.row)
+    const right = Math.max(sel.from.col, sel.to.col)
+    opts['range'] = [top, Math.max(left, skipLeadingCols), bottom, right]
+  }
+
+  if (!opts['range'] && skipLeadingCols > 0) {
+    opts['range'] = [0, skipLeadingCols, lastRow, lastCol]
+  }
+
+  if (format === 'csv') {
+    // CSV reads raw stored values (getDataAtCell) — no type conversion needed.
+    plugin.downloadFile('csv', opts)
+    return
+  }
+
+  // xlsx: temporarily override cell meta during the export's single
+  // getCellMeta() pass, then restore (HOT returns cached meta objects).
+  //  - date/time/datetime types -> 'text' so values export raw, not as native
+  //    Excel dates.
+  //  - drop color/highlight: clear classNames and readOnly so the exporter
+  //    doesn't bake in theme/validation/read-only fills. Cell classes carry no
+  //    meaning in the exported file.
+  const restore: Array<{
+    meta: any
+    type: any
+    className: any
+    readOnly: any
+  }> = []
+  const seen = new Set<any>()
+  const hook = (_row: number, _col: number, cp: any): void => {
+    if (seen.has(cp)) return
+    seen.add(cp)
+
+    const needsTypeFix = RAW_EXPORT_TYPES.has(cp.type)
+    const needsClassFix =
+      typeof cp.className === 'string' && cp.className !== ''
+    const needsReadOnlyFix = cp.readOnly === true
+
+    if (!needsTypeFix && !needsClassFix && !needsReadOnlyFix) return
+
+    restore.push({
+      meta: cp,
+      type: cp.type,
+      className: cp.className,
+      readOnly: cp.readOnly
+    })
+
+    if (needsTypeFix) cp.type = 'text'
+    if (needsClassFix) cp.className = ''
+    if (needsReadOnlyFix) cp.readOnly = false
+  }
+
+  hot.addHook('afterGetCellMeta', hook)
+  try {
+    const mod: any = await import('exceljs')
+    const ExcelJS = mod.default ?? mod
+    await plugin.downloadFileAsync('xlsx', { ...opts, engine: ExcelJS })
+  } finally {
+    hot.removeHook('afterGetCellMeta', hook)
+    restore.forEach(({ meta, type, className, readOnly }) => {
+      meta.type = type
+      meta.className = className
+      meta.readOnly = readOnly
+    })
+  }
+}
+
+/**
+ * Builds a reusable `export_file` context-menu item (CSV / Excel submenu) that
+ * exports the given grid via {@link exportGrid}. Add it to any HOT context-menu
+ * `items` map under the `export_file` key.
+ *
+ * @param getFilename Returns the export file name at click time.
+ * @param skipLeadingCols Leading UI columns to exclude (see {@link exportGrid}).
+ */
+export function buildExportMenuItem(
+  getFilename: () => string,
+  skipLeadingCols = 0
+): MenuItemConfig {
+  // HOT invokes context-menu callbacks with `this` bound to the clicked grid
+  // instance, so the item works uniformly even for components that host
+  // multiple grids (e.g. viewboxes).
+  const makeCb = (format: HotExportFormat) =>
+    function (this: Handsontable): void {
+      void exportGrid(this, format, getFilename(), skipLeadingCols)
+    }
+
+  return {
+    name: 'Export',
+    // The exportFile plugin registers a predefined item under the same
+    // `export_file` key whose `hidden()` returns true unless an `exportFile`
+    // setting exists. HOT shallow-merges our config over it, so we must
+    // explicitly override `hidden` to keep the item visible.
+    hidden: false,
+    submenu: {
+      // Submenu keys use the documented "parent_key:sub_key" form. The array
+      // form is what HOT's own exportFile plugin uses at runtime; cast to
+      // satisfy the (stricter) MenuConfig typing.
+      items: [
+        {
+          key: 'export_file:csv',
+          name: 'CSV',
+          callback: makeCb('csv')
+        },
+        {
+          key: 'export_file:xlsx',
+          name: 'Excel (.xlsx)',
+          callback: makeCb('xlsx')
+        }
+      ] as any
+    }
+  }
+}

client/src/app/shared/shared.module.ts

@@ -15,6 +15,8 @@ import { DirectivesModule } from '../directives/directives.module'
 import { DatasetInfoComponent } from './dataset-info/dataset-info.component'
 import { ContactLinkComponent } from './contact-link/contact-link.component'
 import { ExcelPasswordModalComponent } from './excel-password-modal/excel-password-modal.component'
+import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component'
+import { BulkValidationModalComponent } from './bulk-validation-modal/bulk-validation-modal.component'
 
 @NgModule({
   imports: [
@@ -32,7 +34,9 @@ import { ExcelPasswordModalComponent } from './excel-password-modal/excel-passwo
     TermsComponent,
     DatasetInfoComponent,
     ContactLinkComponent,
-    ExcelPasswordModalComponent
+    ExcelPasswordModalComponent,
+    ConfirmModalComponent,
+    BulkValidationModalComponent
   ],
   exports: [
     LoadingIndicatorComponent,
@@ -42,7 +46,9 @@ import { ExcelPasswordModalComponent } from './excel-password-modal/excel-passwo
     TermsComponent,
     DatasetInfoComponent,
     ContactLinkComponent,
-    ExcelPasswordModalComponent
+    ExcelPasswordModalComponent,
+    ConfirmModalComponent,
+    BulkValidationModalComponent
   ],
   providers: [UserService, AlertsService]
 })

client/src/app/shared/sidebar/sidebar.component.html

@@ -13,7 +13,7 @@
     <clr-dropdown>
       <button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
         {{ getSubPage() }}
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon aria-hidden="true" shape="caret down"></clr-icon>
       </button>
       <clr-dropdown-menu *clrIfOpen>
         <a
@@ -76,7 +76,9 @@
         class="user-nav-btn"
         clrTabLink
       >
-        <p class="zero-margin"><clr-icon shape="user"></clr-icon> Users</p>
+        <p class="zero-margin">
+          <clr-icon aria-hidden="true" shape="user"></clr-icon> Users
+        </p>
       </button>
       <clr-tab-content> </clr-tab-content>
     </clr-tab>
@@ -87,7 +89,9 @@
         class="user-nav-btn"
         clrTabLink
       >
-        <p class="zero-margin"><clr-icon shape="users"></clr-icon> Groups</p>
+        <p class="zero-margin">
+          <clr-icon aria-hidden="true" shape="users"></clr-icon> Groups
+        </p>
       </button>
       <clr-tab-content *clrIfActive="isMainRoute('/view/usernav/groups')">
       </clr-tab-content>
@@ -100,7 +104,7 @@
         clrTabLink
       >
         <p class="zero-margin">
-          <clr-icon shape="blocks-group"></clr-icon> Roles
+          <clr-icon aria-hidden="true" shape="blocks-group"></clr-icon> Roles
         </p>
       </button>
       <clr-tab-content *clrIfActive="isMainRoute('/view/usernav/roles')">
@@ -115,7 +119,7 @@
     <clr-dropdown>
       <button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
         {{ getSubPage() }}
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon aria-hidden="true" shape="caret down"></clr-icon>
       </button>
       <clr-dropdown-menu *clrIfOpen>
         <a

client/src/app/shared/sidebar/sidebar.component.ts

@@ -80,15 +80,13 @@ export class SidebarComponent implements OnInit {
   public resizeStart() {
     this.resizing = true
 
-    let body = document.getElementsByTagName('body')[0]
-    body.style.cssText = 'user-select: none'
+    document.body.classList.add('select-none')
   }
 
   public resizeEnd() {
     this.resizing = false
 
-    let body = document.getElementsByTagName('body')[0]
-    body.style.cssText = ''
+    document.body.classList.remove('select-none')
   }
 
   @HostListener('document:mousemove', ['$event'])

client/src/app/shared/spreadsheet-util/spreadsheet-util.ts

@@ -816,6 +816,7 @@ export class SpreadsheetUtil {
       data.forEach((row: any[]) => {
         dateCols.forEach((element) => {
           const obj = row[element]
+          if (!obj || obj.v == null) return
           if (isStringNumber(obj.v)) {
             const date = excelDateToJSDate(Number(obj.v))
 
@@ -847,6 +848,7 @@ export class SpreadsheetUtil {
       data.forEach((row: any[]) => {
         timeCols.forEach((element) => {
           const obj = row[element]
+          if (!obj || obj.v == null) return
           if (
             isStringNumber(obj.v) ||
             isStringDecimal(obj.v) ||
@@ -870,6 +872,7 @@ export class SpreadsheetUtil {
       data.forEach((row: any[]) => {
         dateTimeCols.forEach((element) => {
           const obj = row[element]
+          if (!obj || obj.v == null) return
           if (isStringNumber(obj.v) || isStringDecimal(obj.v)) {
             const date = excelDateToJSDate(Number(obj.v))
             obj.v = dateFormat(date) + ' ' + dateToUtcTime(date)
@@ -903,6 +906,7 @@ export class SpreadsheetUtil {
       data.forEach((row: any[]) => {
         xlRuleCols.forEach((element: any) => {
           const obj = row[element.index]
+          if (!obj) return
           if (element.XL_RULE === 'FORMULA') {
             if ('f' in obj) {
               if (obj['t'] === 'n') {
@@ -912,7 +916,7 @@ export class SpreadsheetUtil {
               }
             }
           }
-          row[element] = obj
+          row[element.index] = obj
         })
       })
     }

client/src/app/shared/user-nav-dropdown/header-actions.component.html

@@ -43,7 +43,11 @@
         [class.hidden]="debugLogs.length === 0"
         >{{ debugLogs.length }}</span
       >
-      <clr-icon *ngIf="!isViya" shape="caret down"></clr-icon>
+      <clr-icon
+        *ngIf="!isViya"
+        aria-hidden="true"
+        shape="caret down"
+      ></clr-icon>
     </button>
     <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
       <div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
@@ -83,7 +87,11 @@
       </a>
       <a href="..." (click)="logout($event)" clrDropdownItem>
         <span>Log Out</span>
-        <clr-icon class="clr-logout" shape="logout"></clr-icon>
+        <clr-icon
+          aria-hidden="true"
+          class="clr-logout"
+          shape="logout"
+        ></clr-icon>
       </a>
       <div class="copyRight">
         <span>v{{ commitVer }}</span>

client/src/app/shared/utils/sanitise.ts

@@ -0,0 +1,6 @@
+/**
+ * Strips characters that could cause SAS macro injection (& % ;).
+ */
+export function sanitiseForSas(input: string): string {
+  return input.replace(/[%&;]/g, '')
+}

client/src/app/shared/viewboxes/viewboxes.component.html

@@ -50,7 +50,7 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="grid-view" size="19"></clr-icon>
+            <clr-icon aria-hidden="true" shape="grid-view" size="19"></clr-icon>
             <span class="tooltip-content">Snap viewboxes to grid</span>
           </a>
 
@@ -60,7 +60,7 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="minus" size="19"></clr-icon>
+            <clr-icon aria-hidden="true" shape="minus" size="19"></clr-icon>
             <span class="tooltip-content">Minimize all viewboxes</span>
           </a>
 
@@ -70,7 +70,11 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="window-restore" size="19"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="window-restore"
+              size="19"
+            ></clr-icon>
             <span class="tooltip-content">Restore all viewboxes</span>
           </a>
         </div>
@@ -105,7 +109,11 @@
             class="tooltip tooltip-md tooltip-bottom-left"
             [class.disabled]="viewbox.x === 0 && viewbox.y === 0"
           >
-            <clr-icon shape="cursor-move" size="13"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="cursor-move"
+              size="13"
+            ></clr-icon>
             <span class="tooltip-content">Reset position and size</span>
           </a>
 
@@ -116,7 +124,7 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="minus" size="19"></clr-icon>
+            <clr-icon aria-hidden="true" shape="minus" size="19"></clr-icon>
             <span class="tooltip-content">Minimize viewbox</span>
           </a>
 
@@ -127,7 +135,11 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="window-restore" size="19"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="window-restore"
+              size="19"
+            ></clr-icon>
             <span class="tooltip-content">Restore viewbox</span>
           </a>
 
@@ -137,7 +149,7 @@
             aria-haspopup="true"
             class="tooltip tooltip-md tooltip-bottom-left ml-3"
           >
-            <clr-icon shape="times" size="19"></clr-icon>
+            <clr-icon aria-hidden="true" shape="times" size="19"></clr-icon>
             <span class="tooltip-content">Close viewbox</span>
           </a>
         </div>
@@ -226,6 +238,7 @@
                 }}
                 <clr-icon
                   *ngIf="hotColumns.headerPks.includes(column)"
+                  aria-hidden="true"
                   shape="key"
                 ></clr-icon>
               </span>
@@ -233,6 +246,7 @@
               <clr-icon
                 *ngIf="!hotColumns.headerPks.includes(column)"
                 (click)="onColRemove(column)"
+                aria-label="Remove column"
                 shape="trash"
                 class="cursor-pointer"
               ></clr-icon>
@@ -284,15 +298,25 @@
         <clr-icon
           *ngIf="!viewbox.collapsed"
           (click)="collapse(viewbox)"
+          aria-label="Collapse"
           shape="angle top"
         ></clr-icon>
         <clr-icon
           *ngIf="viewbox.collapsed"
           (click)="expand(viewbox)"
+          aria-label="Expand"
           shape="angle down"
         ></clr-icon>
-        <clr-icon (click)="minimize(viewbox)" shape="minus"></clr-icon>
-        <clr-icon (click)="close(viewbox)" shape="times"></clr-icon>
+        <clr-icon
+          (click)="minimize(viewbox)"
+          aria-label="Minimize"
+          shape="minus"
+        ></clr-icon>
+        <clr-icon
+          (click)="close(viewbox)"
+          aria-label="Close"
+          shape="times"
+        ></clr-icon>
       </div>
     </div>
     <span
@@ -320,6 +344,7 @@
           <clr-icon
             *ngIf="!viewbox.searchLoading"
             (click)="searchTable(searchEl, viewbox)"
+            aria-label="Search"
             shape="search"
           ></clr-icon>
           <span *ngIf="viewbox.searchLoading" class="spinner spinner-inline">
@@ -347,6 +372,7 @@
         <clr-icon
           *ngIf="!viewbox.loadingData"
           (click)="reloadTableData(viewbox); searchEl.value = ''"
+          aria-label="Reload data"
           shape="refresh"
           class="click-icon"
         ></clr-icon>
@@ -357,6 +383,7 @@
           class="tooltip tooltip-lg tooltip-bottom-left ml-5"
         >
           <clr-icon
+            aria-hidden="true"
             shape="filter"
             [class.filter-active]="viewbox.filter_pk !== '0'"
             class="click-icon"
@@ -368,6 +395,7 @@
         <clr-icon
           (click)="openTableEdit(viewbox)"
           [class.disabled]="!tableEditExists(viewbox)"
+          aria-label="Edit table"
           shape="pencil"
           class="click-icon ml-5"
         ></clr-icon>

client/src/app/shared/viewboxes/viewboxes.component.ts

@@ -39,6 +39,7 @@ import { AutocompleteComponent } from 'src/app/shared/autocomplete/autocomplete.
 import { LibraryClickEmitter } from 'src/app/shared/dc-tree/models/LibraryClickEmitter'
 import { TableClickEmitter } from 'src/app/shared/dc-tree/models/TableClickEmitter'
 import { mergeColsRules } from 'src/app/shared/dc-validator/utils/mergeColsRules'
+import { buildExportMenuItem } from 'src/app/shared/hot-export/hot-export.util'
 import { globals, initFilter } from 'src/app/_globals'
 import { ViewboxHotTable } from './models/viewbox-hot-table.model'
 import { ViewboxTable } from './models/viewbox-table.model'
@@ -526,7 +527,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     const viewboxTable = this.viewboxTables[viewboxTableIndex]
     const calculatedHeight = this.calculateTableHeight(viewbox)
 
-    // HOT v16 settings - data will be loaded manually after initialization
+    // HOT v17 settings - data will be loaded manually after initialization
     const settings: Handsontable.GridSettings = {
       colHeaders: viewboxTable.hotTable.colHeaders,
       columns: viewboxTable.hotTable.columns,
@@ -534,7 +535,15 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
       readOnly: true,
       modifyColWidth: this.maxWidthCheker,
       copyPaste: viewboxTable.hotTable.copyPaste,
-      contextMenu: viewboxTable.hotTable.contextMenu,
+      // Built here (not in hotTableDefault) because that template is cloneDeep'd,
+      // which would strip the export callbacks. Client-side view export.
+      contextMenu: {
+        items: {
+          copy_with_column_headers: {},
+          copy_column_headers_only: {},
+          export_file: buildExportMenuItem(() => 'viewbox')
+        }
+      },
       multiColumnSorting: true,
       viewportRowRenderingOffset: 50,
       filters: true,
@@ -544,7 +553,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
       maxRows: viewboxTable.hotTable.maxRows || Infinity,
       manualColumnResize: true,
       rowHeaders: true,
-      licenseKey: viewboxTable.hotTable.licenseKey
+      licenseKey: viewboxTable.hotTable.licenseKey,
+      theme: 'ht-theme-classic'
     }
 
     // Force a new object reference to trigger change detection

client/src/app/stage/stage.component.html

@@ -1,4 +1,4 @@
-<div class="content-area">
+<main class="content-area">
   <div class="clr-col-md-12 card">
     <div
       *ngIf="!loaded"
@@ -127,7 +127,7 @@
         <hot-table
           id="hotTable"
           [data]="hotTable.data"
-          [settings]="hotTableSettings"
+          [settings]="hotTableSettings()"
           aria-label="Staged data table"
         >
           <!--[licenseKey]=null-->
@@ -137,4 +137,4 @@
       <div class="card-footer d-flex justify-content-center"></div>
     </div>
   </div>
-</div>
+</main>

client/src/app/stage/stage.component.ts

@@ -2,8 +2,8 @@ import {
   Component,
   OnInit,
   ViewEncapsulation,
-  ViewChild,
-  AfterViewInit
+  AfterViewInit,
+  signal
 } from '@angular/core'
 import { SasStoreService } from '../services/sas-store.service'
 import { Router } from '@angular/router'
@@ -63,7 +63,12 @@ export class StageComponent implements OnInit, AfterViewInit {
     }
   }
 
-  get hotTableSettings(): Handsontable.GridSettings {
+  // Stable settings reference so the HOT v17 wrapper doesn't re-run
+  // updateSettings on every change-detection tick. Updated only when the data/
+  // columns or license change.
+  hotTableSettings = signal<Handsontable.GridSettings>(this.buildHotSettings())
+
+  private buildHotSettings(): Handsontable.GridSettings {
     return {
       ...this.hotTable.settings,
       colHeaders: this.hotTable.colHeaders,
@@ -75,7 +80,8 @@ export class StageComponent implements OnInit, AfterViewInit {
       afterInit: this.hotTable.afterInit,
       stretchH: 'all',
       cells: this.hotTable.cells,
-      className: 'htDark'
+      className: 'htDark',
+      theme: 'ht-theme-classic'
     }
   }
 
@@ -131,6 +137,7 @@ export class StageComponent implements OnInit, AfterViewInit {
     this.licenceService.hot_license_key.subscribe(
       (hot_license_key: string | undefined) => {
         this.hotTable.licenseKey = hot_license_key
+        this.hotTableSettings.set(this.buildHotSettings())
       }
     )
 
@@ -190,6 +197,7 @@ export class StageComponent implements OnInit, AfterViewInit {
         this.hotTable.colHeaders = colHeaders
         this.hotTable.columns = columns
         this.hotTable.cells = cells
+        this.hotTableSettings.set(this.buildHotSettings())
 
         this.loaded = true
         this.setFocus()

client/src/app/stage/stage.module.ts

@@ -13,7 +13,7 @@ const routes: Routes = [{ path: ':tableId', component: StageComponent }]
     CommonModule,
     ClarityModule,
     RouterModule.forChild(routes),
-    HotTableModule.forRoot()
+    HotTableModule
   ]
 })
 export class StageModule {}

client/src/app/system/system.component.html

@@ -236,14 +236,31 @@
         <div class="admin-action">
           Download Configuration
 
-          <input
-            type="text"
-            class="clr-input libref-input"
-            maxlength="8"
-            [ngModel]="dcLib"
-            (ngModelChange)="targetLibref = $event.toUpperCase()"
-            placeholder="Target Libref"
-          />
+          <div class="libref-group">
+            <clr-tooltip class="libref-tooltip">
+              <label clrTooltipTrigger class="libref-label">
+                Target DC Library
+                <cds-icon shape="info-circle" size="16"></cds-icon>
+              </label>
+              <clr-tooltip-content
+                clrPosition="bottom-left"
+                clrSize="md"
+                *clrIfOpen
+              >
+                Enter the target DC library and the downloaded files will
+                contain this, instead of the original.
+              </clr-tooltip-content>
+            </clr-tooltip>
+
+            <input
+              type="text"
+              class="clr-input libref-input"
+              maxlength="8"
+              [ngModel]="dcLib"
+              (ngModelChange)="targetLibref = $event.toUpperCase()"
+              placeholder="e.g. MYLIB"
+            />
+          </div>
           <button
             (click)="downloadConfiguration()"
             [disabled]="targetLibref !== dcLib && !isValidLibref(targetLibref)"

client/src/app/system/system.component.scss

@@ -1,5 +1,21 @@
+.libref-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+
+.libref-label {
+  cursor: pointer;
+  font-size: 0.55rem;
+  font-weight: 600;
+  color: var(--clr-p4-color, #565656);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .libref-input {
   width: 100px;
-  margin: 0 8px;
   text-transform: uppercase;
 }

client/src/app/viewer/viewer.component.html

@@ -19,11 +19,13 @@
 
         <clr-icon
           *ngIf="searchLibTreeInput.value.length < 1"
+          aria-hidden="true"
           shape="search"
         ></clr-icon>
         <clr-icon
           *ngIf="searchLibTreeInput.value.length > 0"
           (click)="librariesSearch = ''; libraryOnFilter()"
+          aria-label="Clear search"
           shape="times"
         ></clr-icon>
       </div>
@@ -44,7 +46,7 @@
           "
           class="m-0 cursor-pointer"
         >
-          <clr-icon shape="rack-server"></clr-icon>
+          <clr-icon aria-hidden="true" shape="rack-server"></clr-icon>
           {{ library.LIBRARYNAME }}
         </p>
 
@@ -64,6 +66,7 @@
 
             <clr-icon
               *ngIf="searchTreeInput.value.length < 1"
+              aria-hidden="true"
               shape="search"
             ></clr-icon>
             <clr-icon
@@ -73,6 +76,7 @@
                 library['searchString'] = '';
                 treeOnFilter(library, 'tables')
               "
+              aria-label="Clear search"
               shape="times"
             ></clr-icon>
           </div>
@@ -96,8 +100,16 @@
               [class.active]="libTabActive(library.LIBRARYREF, libTable)"
             >
               <ng-container [ngSwitch]="libTable.includes('-FC')">
-                <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
-                <clr-icon *ngSwitchCase="false" shape="table"></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="true"
+                  aria-hidden="true"
+                  shape="bolt"
+                ></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="false"
+                  aria-hidden="true"
+                  shape="table"
+                ></clr-icon>
               </ng-container>
               {{ libTable.replace('-FC', '') }}
             </button>
@@ -345,6 +357,7 @@
             <clr-icon
               *ngIf="!searchLoading"
               (click)="searchTable(searchEl)"
+              aria-label="Search"
               shape="search"
             ></clr-icon>
             <span *ngIf="searchLoading" class="spinner spinner-inline">
@@ -383,6 +396,7 @@
 
             <clr-icon
               *ngIf="tableTitle?.includes('-FC')"
+              aria-hidden="true"
               shape="bolt"
               class="color-yellow mr-5"
             ></clr-icon>
@@ -411,6 +425,7 @@
 
             <clr-icon
               (click)="reloadTableData()"
+              aria-label="Reload data"
               class="refresh-table"
               shape="refresh"
             ></clr-icon>
@@ -429,12 +444,12 @@
             class="btn btn-sm btn-outline filterSide"
             clrDropdownTrigger
           >
-            <clr-icon shape="cog" size="15"></clr-icon>
+            <clr-icon aria-hidden="true" shape="cog" size="15"></clr-icon>
             options
           </button>
           <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
             <div (click)="newViewbox()" clrDropdownItem>
-              <clr-icon shape="view-cards"></clr-icon>
+              <clr-icon aria-hidden="true" shape="view-cards"></clr-icon>
               <span>Viewboxes</span>
             </div>
             <div
@@ -442,23 +457,23 @@
               (click)="editTable()"
               clrDropdownItem
             >
-              <clr-icon shape="pencil"></clr-icon>
+              <clr-icon aria-hidden="true" shape="pencil"></clr-icon>
               <span>Edit</span>
             </div>
             <div *ngIf="tableuri" (click)="goToLineage()" clrDropdownItem>
-              <clr-icon shape="switch"></clr-icon>
+              <clr-icon aria-hidden="true" shape="switch"></clr-icon>
               <span>Lineage</span>
             </div>
             <div (click)="openQb()" clrDropdownItem>
-              <clr-icon shape="filter"></clr-icon>
+              <clr-icon aria-hidden="true" shape="filter"></clr-icon>
               <span>Filter</span>
             </div>
             <div (click)="openDownload = true" clrDropdownItem>
-              <clr-icon shape="download"></clr-icon>
+              <clr-icon aria-hidden="true" shape="download"></clr-icon>
               <span>Download</span>
             </div>
             <div (click)="showWebQuery()" clrDropdownItem>
-              <clr-icon shape="download-cloud"></clr-icon>
+              <clr-icon aria-hidden="true" shape="download-cloud"></clr-icon>
               <span>Web Query URL</span>
             </div>
           </clr-dropdown-menu>
@@ -505,6 +520,7 @@
           </p>
           <clr-icon
             (click)="reloadLibInfo()"
+            aria-label="Reload library info"
             class="refresh-table"
             shape="refresh"
           ></clr-icon>
@@ -536,6 +552,7 @@
           No library info found. Click
           <clr-icon
             (click)="reloadLibInfo()"
+            aria-label="Reload library info"
             class="refresh-table m-0"
             shape="refresh"
           ></clr-icon>
@@ -610,7 +627,12 @@
     </ng-container>
 
     <div *ngIf="noData || noDataReqErr" class="card-block noData">
-      <clr-icon shape="warning-standard" size="60" class="is-info"></clr-icon>
+      <clr-icon
+        aria-hidden="true"
+        shape="warning-standard"
+        size="60"
+        class="is-info"
+      ></clr-icon>
       <h3 *ngIf="noData" class="text-center color-gray">
         No data found with given conditions
       </h3>

client/src/app/viewer/viewer.component.ts

@@ -25,6 +25,7 @@ import { QueryComponent } from '../query/query.component'
 
 import { FilterGroup, FilterQuery } from '../models/FilterQuery'
 import { HotTableInterface } from '../models/HotTable.interface'
+import { buildExportMenuItem } from '../shared/hot-export/hot-export.util'
 import { LoggerService } from '../services/logger.service'
 import Handsontable from 'handsontable'
 import {
@@ -33,6 +34,7 @@ import {
   Version
 } from '../models/sas/editors-getdata.model'
 import { mergeColsRules } from '../shared/dc-validator/utils/mergeColsRules'
+import { makeNumberFormatRenderer } from '../editor/utils/renderers.utils'
 import { PublicViewtablesServiceResponse } from '../models/sas/public-viewtables.model'
 import { PublicViewlibsServiceResponse } from '../models/sas/public-viewlibs.model'
 import { PublicRefreshlibinfoServiceResponse } from '../models/sas/public-refreshlibinfo.model'
@@ -40,7 +42,6 @@ import { DataFormat } from '../models/sas/common/DateFormat'
 import { Libinfo } from '../models/sas/common/Libinfo'
 import { LicenceService } from '../services/licence.service'
 import { Location } from '@angular/common'
-import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapperResponse'
 
 @Component({
   selector: 'app-viewer',
@@ -122,6 +123,7 @@ export class ViewerComponent
       stretchH: 'all',
       modifyColWidth: this.maxWidthCheker,
       cells: this.hotTable.cells,
+      hiddenColumns: { columns: this.hiddenViewColumns, indicators: false },
       maxRows: this.hotTable.maxRows,
       manualColumnResize: true,
       afterGetColHeader: this.hotTable.afterGetColHeader,
@@ -129,12 +131,15 @@ export class ViewerComponent
       rowHeaderWidth: this.hotTable.rowHeaderWidth,
       rowHeights: this.hotTable.rowHeights,
       licenseKey: this.hotTable.licenseKey,
-      className: 'htDark'
+      className: 'htDark',
+      theme: 'ht-theme-classic'
     }
   }
   public numberOfRows: number | null = null
   public headerPks: string[] = []
   public $dataFormats: $DataFormats | null = null
+  // Physical column indexes to hide in the viewer (from HIDDEN DQ rules)
+  public hiddenViewColumns: number[] = []
   public datasetInfo: boolean = false
   public dsmeta: DSMeta[] = []
   public versions: Version[] = []
@@ -181,7 +186,13 @@ export class ViewerComponent
     },
     rowHeaderWidth: 15,
     rowHeights: 20,
-    contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'],
+    contextMenu: {
+      items: {
+        copy_with_column_headers: {},
+        copy_column_headers_only: {},
+        export_file: buildExportMenuItem(() => this.tableTitle || 'export')
+      }
+    },
     copyPaste: {
       copyColumnHeaders: true,
       copyColumnHeadersOnly: true
@@ -769,18 +780,14 @@ export class ViewerComponent
       let ds = []
       ds = this.libDataset.split('.')
 
-      if (globals.viewer.startupSet) {
-        this.libraries = globals.viewer.libraries
-      } else {
-        await this.sasStoreService
-          .viewLibs()
-          .then((res: any) => {
-            this.libraries = res.saslibs
-          })
-          .catch((err: any) => {
-            this.loggerService.error(err)
-          })
-      }
+      await this.sasStoreService
+        .viewLibs()
+        .then((res: any) => {
+          this.libraries = res.saslibs
+        })
+        .catch((err: any) => {
+          this.loggerService.error(err)
+        })
 
       this.lib = ds[0]
 
@@ -815,18 +822,14 @@ export class ViewerComponent
       libDataset = this.libDataset
       this.libTab = libDataset
     } else {
-      if (globals.viewer.startupSet) {
-        this.libraries = globals.viewer.libraries
-      } else {
-        await this.sasStoreService
-          .viewLibs()
-          .then((res: any) => {
-            this.libraries = res.saslibs
-          })
-          .catch((err: any) => {
-            this.loggerService.error(err)
-          })
-      }
+      await this.sasStoreService
+        .viewLibs()
+        .then((res: any) => {
+          this.libraries = res.saslibs
+        })
+        .catch((err: any) => {
+          this.loggerService.error(err)
+        })
 
       if (typeof this.table !== 'undefined') {
         if (globals.viewer.startupSet) {
@@ -911,16 +914,43 @@ export class ViewerComponent
               }
             }
 
+            // NUMBER_FORMAT (display) and HIDDEN (visibility) are the DQ rules
+            // that make sense in the read-only viewer; READONLY/ROUND are
+            // editor-only. Build lookups for both from the response.
+            const numberFormats: { [col: string]: string } = {}
+            const hiddenCols = new Set<string>()
+            if (Array.isArray(res.dqrules)) {
+              for (const rule of res.dqrules) {
+                if (rule.RULE_TYPE === 'NUMBER_FORMAT') {
+                  numberFormats[rule.BASE_COL] = rule.RULE_VALUE
+                }
+                if (rule.RULE_TYPE === 'HIDDEN') {
+                  hiddenCols.add(rule.BASE_COL)
+                }
+              }
+            }
+
+            const hiddenColumnIndexes: number[] = []
             for (let index = 0; index < colArr.length; index++) {
-              columns.push({ data: colArr[index] })
+              const col = colArr[index]
+              const colDef: any = { data: col }
+              if (numberFormats[col]) {
+                colDef.renderer = makeNumberFormatRenderer(numberFormats[col])
+              }
+              if (hiddenCols.has(col)) {
+                hiddenColumnIndexes.push(index)
+              }
+              columns.push(colDef)
             }
 
             this.hotTable.colHeaders = colArr
             this.hotTable.columns = columns
+            this.hiddenViewColumns = hiddenColumnIndexes
           } else {
             // Set empty arrays if no data
             this.hotTable.colHeaders = []
             this.hotTable.columns = []
+            this.hiddenViewColumns = []
           }
 
           // Set cells function

client/src/app/xlmap/xlmap.component.html

@@ -127,7 +127,7 @@
       <hot-table
         id="hot-table"
         [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
-        [settings]="hotTableSettings"
+        [settings]="hotTableSettings()"
       >
       </hot-table>
     </div>

client/src/app/xlmap/xlmap.component.ts

@@ -6,6 +6,7 @@ import {
   HostBinding,
   OnInit,
   QueryList,
+  signal,
   ViewChildren,
   ViewEncapsulation
 } from '@angular/core'
@@ -138,7 +139,13 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   public hotTableMaxRows =
     this.licenceState.value.viewer_rows_allowed || Infinity
 
-  get hotTableSettings(): Handsontable.GridSettings {
+  // Stable settings reference so the HOT v17 wrapper doesn't re-run
+  // updateSettings on every change-detection tick (the previous getter returned a
+  // new object each call, causing an infinite render loop / freeze). Rebuilt only
+  // when the selected tab, or the license, changes (see setSelectedTab + ngOnInit).
+  hotTableSettings = signal<Handsontable.GridSettings>(this.buildHotSettings())
+
+  private buildHotSettings(): Handsontable.GridSettings {
     return {
       multiColumnSorting: true,
       viewportRowRenderingOffset: 50,
@@ -162,10 +169,17 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
       rowHeaderWidth: 15,
       rowHeights: 20,
       licenseKey: this.hotTableLicenseKey,
-      className: 'htDark'
+      className: 'htDark',
+      theme: 'ht-theme-classic'
     }
   }
 
+  // Single place that changes the active tab so the settings signal stays in sync.
+  private setSelectedTab(tab: Tabs) {
+    this.selectedTab = tab
+    this.hotTableSettings.set(this.buildHotSettings())
+  }
+
   constructor(
     private eventService: EventService,
     private licenceService: LicenceService,
@@ -190,7 +204,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
       if (this.fileUploadInputCompList.first) {
         this.fileUploadInputCompList.first.nativeElement.value = ''
       }
-      this.selectedTab = Tabs.Rules
+      this.setSelectedTab(Tabs.Rules)
       this.viewXLMapRules()
       this.router.navigateByUrl('/home/excel-maps/' + xlmap.id)
     }
@@ -316,7 +330,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     this.isLoadingDesc = ''
     this.status = Status.ReadyToUpload
     this.xlData = []
-    this.selectedTab = Tabs.Rules
+    this.setSelectedTab(Tabs.Rules)
     this.filename = ''
     this.uploader.queue = []
     if (this.fileUploadInputCompList.first) {
@@ -466,7 +480,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     this.isLoadingDesc = ''
 
     this.xlData = extractedData
-    this.selectedTab = Tabs.Data
+    this.setSelectedTab(Tabs.Data)
   }
 
   async viewXLMapRules() {
@@ -509,6 +523,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     this.licenceService.hot_license_key.subscribe(
       (hot_license_key: string | undefined) => {
         this.hotTableLicenseKey = hot_license_key
+        this.hotTableSettings.set(this.buildHotSettings())
       }
     )
   }

client/src/assets/hot-icons/arrow-down.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.6'><path d='M11.5859 6L8.29304 9.29289L5.00015 6' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></g></svg>

client/src/assets/hot-icons/arrow-left-with-bar.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11.0713 4.64188L7.72115 7.99203L11.0713 11.3422M4.92936 4.08353L4.92936 11.3422' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/arrow-narrow-down.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.00004 3.33331V12.6666M8.00004 12.6666L10.6667 9.99998M8.00004 12.6666L5.33337 9.99998' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/arrow-narrow-up.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.00008 12.6667L8.00008 3.33335M8.00008 3.33335L5.33342 6.00002M8.00008 3.33335L10.6667 6.00002' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/arrow-right-with-bar.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.9292 4.64188L8.27934 7.99203L4.9292 11.3422M11.0711 4.08353V11.3422' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/caret-hidden-down.svg

@@ -0,0 +1 @@
+<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.9999 3C6.2839 3 6.43224 3.32867 6.2609 3.541L6.23557 3.569L4.23557 5.569C4.17817 5.62639 4.10181 5.66087 4.0208 5.66596C3.93979 5.67106 3.8597 5.64642 3.79557 5.59667L3.76424 5.569L1.76424 3.569L1.73657 3.53767L1.71857 3.512L1.70057 3.48L1.6949 3.468L1.6859 3.44567L1.67524 3.40967L1.6719 3.392L1.66857 3.372L1.66724 3.353V3.31367L1.6689 3.29433L1.6719 3.27433L1.67524 3.257L1.6859 3.221L1.6949 3.19867L1.71824 3.15467L1.7399 3.12467L1.76424 3.09767L1.79557 3.07L1.82124 3.052L1.85324 3.034L1.86524 3.02833L1.88757 3.01933L1.92357 3.00867L1.94124 3.00533L1.96124 3.002L1.98024 3.00067L5.9999 3Z' fill='currentColor'/></svg>

client/src/assets/hot-icons/caret-hidden-left.svg

@@ -0,0 +1 @@
+<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.08482 1.35771L6.11503 1.3551H6.17649L6.2067 1.35771L6.23795 1.36239L6.26503 1.3676L6.32128 1.38427L6.35618 1.39833L6.42493 1.43479L6.4718 1.46864L6.51399 1.50667L6.55722 1.55562L6.58534 1.59573L6.61347 1.64573L6.62232 1.66448L6.63639 1.69937L6.65305 1.75562L6.65826 1.78323L6.66347 1.81448L6.66555 1.84417L6.66659 1.87489V8.12489C6.66659 8.56864 6.15305 8.80042 5.82128 8.53271L5.77753 8.49312L2.65253 5.36812C2.56286 5.27844 2.50899 5.15912 2.50103 5.03254C2.49307 4.90596 2.53157 4.78083 2.6093 4.68062L2.65253 4.63167L5.77753 1.50667L5.82649 1.46344L5.86659 1.43531L5.91659 1.40719L5.93534 1.39833L5.97024 1.38427L6.02649 1.3676L6.05409 1.36239L6.08482 1.35771Z' fill='currentColor'/></svg>

client/src/assets/hot-icons/caret-hidden-right.svg

@@ -0,0 +1 @@
+<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.33337 1.87499C3.33337 1.43124 3.84692 1.19947 4.17869 1.46718L4.22244 1.50676L7.34744 4.63176C7.43711 4.72145 7.49098 4.84077 7.49894 4.96735C7.5069 5.09392 7.4684 5.21905 7.39067 5.31926L7.34744 5.36822L4.22244 8.49322L4.17348 8.53645L4.13337 8.56457L4.08337 8.5927L4.06462 8.60155L4.02973 8.61562L3.97348 8.63228L3.94587 8.63749L3.91462 8.6427L3.88494 8.64478L3.85421 8.64582L3.82348 8.64478L3.79327 8.64218L3.76202 8.63749L3.73494 8.63228L3.67869 8.61562L3.64379 8.60155L3.57504 8.5651L3.52817 8.53124L3.48598 8.49322L3.44275 8.44426L3.41462 8.40416L3.3865 8.35416L3.37764 8.33541L3.36358 8.30051L3.34692 8.24426L3.34171 8.21666L3.3365 8.18541L3.33442 8.15572L3.33337 1.87499Z' fill='currentColor'/></svg>

client/src/assets/hot-icons/caret-hidden-up.svg

@@ -0,0 +1 @@
+<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.76425 2.43099C3.82165 2.3736 3.89801 2.33913 3.97902 2.33403C4.06003 2.32894 4.14012 2.35358 4.20425 2.40333L4.23558 2.43099L6.23558 4.43099L6.26325 4.46233L6.28125 4.48799L6.29925 4.51999L6.30492 4.53199L6.31392 4.55433L6.32458 4.59033L6.32792 4.60799L6.33125 4.62799L6.33258 4.64699L6.33325 4.66666L6.33258 4.68633L6.33092 4.70566L6.32792 4.72566L6.32458 4.74299L6.31392 4.77899L6.30492 4.80133L6.28158 4.84533L6.25992 4.87533L6.23558 4.90233L6.20425 4.92999L6.17858 4.94799L6.14658 4.96599L6.13458 4.97166L6.11225 4.98066L6.07625 4.99133L6.05858 4.99466L6.03858 4.99799L6.01958 4.99933L5.99992 4.99999H1.99992C1.71592 4.99999 1.56758 4.67133 1.73892 4.45899L1.76425 4.43099L3.76425 2.43099Z' fill='currentColor'/></svg>

client/src/assets/hot-icons/check.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.33337 8.00002L6.66671 11.3334L13.3334 4.66669' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/checkbox.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 8L7 10L11 6' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/chip-close.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 4L4 12M4 4L12 12' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>

client/src/assets/hot-icons/collapse-off.svg

@@ -0,0 +1 @@
+<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.33325 8H11.6666' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>