Dockerfile, angular.json and docker compose that works for webpack-dev + reverse proxy

Bumps [compression](https://github.com/expressjs/compression) from 1.8.0 to 1.8.1.
- [Release notes](https://github.com/expressjs/compression/releases)
- [Changelog](https://github.com/expressjs/compression/blob/master/HISTORY.md)
- [Commits](https://github.com/expressjs/compression/compare/1.8.0...v1.8.1)

---
updated-dependencies:
- dependency-name: compression
  dependency-version: 1.8.1
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/dependabot.yml

@@ -13,6 +13,7 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+      time: "05:00"
     # Allow up to 10 open PRs for dependencies
     open-pull-requests-limit: 10
     # Group together Angular package upgrades
@@ -141,18 +142,26 @@ updates:
         update-types:
         - "minor"
         - "patch"
+      # Restrict zone.js updates to patch level to avoid dependency conflicts with @angular/core
+      zonejs:
+        applies-to: version-updates
+        patterns:
+        - "zone.js"
+        update-types:
+        - "patch"
     ignore:
       # Ignore all major version updates for all dependencies. We'll only automate minor/patch updates.
       - dependency-name: "*"
         update-types: ["version-update:semver-major"]
   #####################
-  ## dspace-8_x branch
+  ## dspace-9_x branch
   #####################
   - package-ecosystem: "npm"
     directory: "/"
-    target-branch: dspace-8_x
+    target-branch: dspace-9_x
     schedule:
       interval: "weekly"
+      time: "05:00"
     # Allow up to 10 open PRs for dependencies
     open-pull-requests-limit: 10
     # Group together Angular package upgrades
@@ -219,6 +228,99 @@ updates:
         update-types:
         - "minor"
         - "patch"
+      # Restrict zone.js updates to patch level to avoid dependency conflicts with @angular/core
+      zonejs:
+        applies-to: version-updates
+        patterns:
+        - "zone.js"
+        update-types:
+        - "patch"
+    ignore:
+      # Ignore all major version updates for all dependencies. We'll only automate minor/patch updates.
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+  #####################
+  ## dspace-8_x branch
+  #####################
+  - package-ecosystem: "npm"
+    directory: "/"
+    target-branch: dspace-8_x
+    schedule:
+      interval: "weekly"
+      time: "05:00"
+    # Allow up to 10 open PRs for dependencies
+    open-pull-requests-limit: 10
+    # Group together Angular package upgrades
+    groups:
+      # Group together all patch version updates for Angular in a single PR
+      angular:
+        applies-to: version-updates
+        patterns:
+        - "@angular*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together all minor/patch version updates for NgRx in a single PR
+      ngrx:
+        applies-to: version-updates
+        patterns:
+        - "@ngrx*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together all patch version updates for eslint in a single PR
+      eslint:
+        applies-to: version-updates
+        patterns:
+        - "@typescript-eslint*"
+        - "eslint*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together any testing related version updates
+      testing:
+        applies-to: version-updates
+        patterns:
+        - "@cypress*"
+        - "axe-*"
+        - "cypress*"
+        - "jasmine*"
+        - "karma*"
+        - "ng-mocks"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together any postcss related version updates
+      postcss:
+        applies-to: version-updates
+        patterns:
+        - "postcss*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together any sass related version updates
+      sass:
+        applies-to: version-updates
+        patterns:
+        - "sass*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Group together any webpack related version updates
+      webpack:
+        applies-to: version-updates
+        patterns:
+        - "webpack*"
+        update-types:
+        - "minor"
+        - "patch"
+      # Restrict zone.js updates to patch level to avoid dependency conflicts with @angular/core
+      zonejs:
+        applies-to: version-updates
+        patterns:
+        - "zone.js"
+        update-types:
+        - "patch"
     ignore:
       # Ignore all major version updates for all dependencies. We'll only automate minor/patch updates.
       - dependency-name: "*"
@@ -231,6 +333,7 @@ updates:
     target-branch: dspace-7_x
     schedule:
       interval: "weekly"
+      time: "05:00"
     # Allow up to 10 open PRs for dependencies
     open-pull-requests-limit: 10
     # Group together Angular package upgrades
@@ -289,6 +392,13 @@ updates:
         update-types:
         - "minor"
         - "patch"
+      # Restrict zone.js updates to patch level to avoid dependency conflicts with @angular/core
+      zonejs:
+        applies-to: version-updates
+        patterns:
+        - "zone.js"
+        update-types:
+        - "patch"
     ignore:
       # 7.x Cannot update Webpack past v5.76.1 as later versions not supported by Angular 15
       # See also https://github.com/DSpace/dspace-angular/pull/3283#issuecomment-2372488489

Dockerfile

@@ -23,4 +23,4 @@ ENV NODE_OPTIONS="--max_old_space_size=4096"
 # NOTE: At this time it is only possible to run Docker container in Production mode
 # if you have a public URL. See https://github.com/DSpace/dspace-angular/issues/1485
 ENV NODE_ENV=development
-CMD npm run serve -- --host 0.0.0.0
+CMD npm run serve -- --host 0.0.0.0 --disable-host-check

angular.json

@@ -112,7 +112,9 @@
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "buildTarget": "dspace-angular:build",
-            "port": 4000
+            "port": 4000,
+			"allowedHosts": ["all"],
+			"disableHostCheck": true,
           },
           "configurations": {
             "development": {

config/config.example.yml

@@ -274,6 +274,9 @@ languages:
   - code: gd
     label: Gàidhlig
     active: true
+  - code: gu
+    label: ગુજરાતી
+    active: true
   - code: hi
     label: हिंदी
     active: true
@@ -289,6 +292,9 @@ languages:
   - code: lv
     label: Latviešu
     active: true
+  - code: mr
+    label: मराठी
+    active: true
   - code: nl
     label: Nederlands
     active: true
@@ -301,6 +307,9 @@ languages:
   - code: pt-BR
     label: Português do Brasil
     active: true
+  - code: ru
+    label: Русский
+    active: true
   - code: sr-lat
     label: Srpski (lat)
     active: true

cypress/e2e/community-list.cy.ts

@@ -1,13 +1,87 @@
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community List Page', () => {
+  function validateHierarchyLevel(currentLevel = 1): void {
+    // Find all <cdk-tree-node> elements with the current aria-level
+    cy.get(`ds-community-list cdk-tree-node.expandable-node[aria-level="${currentLevel}"]`).should('exist').then(($nodes) => {
+      let sublevelExists = false;
+      cy.wrap($nodes).each(($node) => {
+        // Check if the current node has an expand button and click it
+        if ($node.find('[data-test="expand-button"]').length) {
+          sublevelExists = true;
+          cy.wrap($node).find('[data-test="expand-button"]').click();
+        }
+      }).then(() => {
+        // After expanding all buttons, validate if a sublevel exists
+        if (sublevelExists) {
+          const nextLevelSelector = `ds-community-list cdk-tree-node.expandable-node[aria-level="${currentLevel + 1}"]`;
+          cy.get(nextLevelSelector).then(($nextLevel) => {
+            if ($nextLevel.length) {
+              // Recursively validate the next level
+              validateHierarchyLevel(currentLevel + 1);
+            }
+          });
+        }
+      });
+    });
+  }
 
-  it('should pass accessibility tests', () => {
+  beforeEach(() => {
     cy.visit('/community-list');
 
     // <ds-community-list-page> tag must be loaded
     cy.get('ds-community-list-page').should('be.visible');
 
+    // <ds-community-list-list> tag must be loaded
+    cy.get('ds-community-list').should('be.visible');
+  });
+
+  it('should expand community/collection hierarchy', () => {
+    // Execute Hierarchy levels validation recursively
+    validateHierarchyLevel(1);
+  });
+
+  it('should display community/collections name with item count', () => {
+    // Open every <cdk-tree-node>
+    cy.get('[data-test="expand-button"]').click({ multiple: true });
+    cy.wait(300);
+
+    // A first <cdk-tree-node> must be found and validate that <a> tag (community name) and <span> tag (item count) exists in it
+    cy.get('ds-community-list').find('cdk-tree-node.expandable-node').then(($nodes) => {
+      cy.wrap($nodes).each(($node) => {
+        cy.wrap($node).find('a').should('exist');
+        cy.wrap($node).find('span').should('exist');
+      });
+    });
+  });
+
+  it('should enable "show more" button when 20 top-communities or more are presents', () => {
+    cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').then(($nodes) => {
+      //Validate that there are 20 or more top-community elements
+      if ($nodes.length >= 20) {
+        //Validate that "show more" button is visible and then click on it
+        cy.get('[data-test="show-more-button"]').should('be.visible');
+      } else {
+        cy.get('[data-test="show-more-button"]').should('not.exist');
+      }
+    });
+  });
+
+  it('should show 21 or more top-communities if click "show more" button', () => {
+    cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').then(($nodes) => {
+      //Validate that there are 20 or more top-community elements
+      if ($nodes.length >= 20) {
+        //Validate that "show more" button is visible and then click on it
+        cy.get('[data-test="show-more-button"]').click();
+        cy.wait(300);
+        cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').should('have.length.at.least', 21);
+      } else {
+        cy.get('[data-test="show-more-button"]').should('not.exist');
+      }
+    });
+  });
+
+  it('should pass accessibility tests', () => {
     // Open every expand button on page, so that we can scan sub-elements as well
     cy.get('[data-test="expand-button"]').click({ multiple: true });
 

cypress/e2e/my-dspace.cy.ts

@@ -84,7 +84,7 @@ describe('My DSpace page', () => {
       cy.url().should('include', '/mydspace');
 
       // Close any open notifications, to make sure they don't get in the way of next steps
-      cy.get('[data-dismiss="alert"]').click({ multiple: true });
+      cy.get('[data-bs-dismiss="alert"]').click({ multiple: true });
 
       // This is the GET command that will actually run the search
       cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');

cypress/e2e/submission.cy.ts

@@ -95,7 +95,7 @@ describe('New Submission page', () => {
       // A success alert should be visible
       cy.get('ds-notification div.alert-success').should('be.visible');
       // Now, dismiss any open alert boxes (may be multiple, as tests run quickly)
-      cy.get('[data-dismiss="alert"]').click({ multiple: true });
+      cy.get('[data-bs-dismiss="alert"]').click({ multiple: true });
 
       // This is the GET command that will actually run the search
       cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');

docker/docker-compose-rest.yml

@@ -29,8 +29,8 @@ services:
       # dspace.dir, dspace.server.url, dspace.ui.url and dspace.name
       dspace__P__dir: /dspace
       # Uncomment to set a non-default value for dspace.server.url or dspace.ui.url
-      # dspace__P__server__P__url: http://localhost:8080/server
-      # dspace__P__ui__P__url: http://localhost:4000
+      dspace__P__server__P__url: https://digitalrepo.internal.yel.or.id/server
+      dspace__P__ui__P__url: https://digitalrepo.internal.yel.or.id
       dspace__P__name: 'DSpace Started with Docker Compose'
       # db.url: Ensure we are using the 'dspacedb' image for our database
       db__P__url: 'jdbc:postgresql://dspacedb:5432/dspace'

docker/docker-compose.yml

@@ -19,9 +19,9 @@ services:
       DSPACE_UI_HOST: dspace-angular
       DSPACE_UI_PORT: '4000'
       DSPACE_UI_NAMESPACE: /
-      DSPACE_REST_SSL: 'false'
-      DSPACE_REST_HOST: localhost
-      DSPACE_REST_PORT: 8080
+      DSPACE_REST_SSL: 'true'
+      DSPACE_REST_HOST: digitalrepo.internal.yel.or.id
+      DSPACE_REST_PORT: '443'
       DSPACE_REST_NAMESPACE: /server
     image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-latest}"
     build:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "9.0.0",
+  "version": "10.0.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -102,8 +102,8 @@
     "@angular/platform-browser-dynamic": "^18.2.12",
     "@angular/platform-server": "^18.2.12",
     "@angular/router": "^18.2.12",
-    "@angular/ssr": "^18.2.19",
-    "@babel/runtime": "7.27.1",
+    "@angular/ssr": "^18.2.20",
+    "@babel/runtime": "7.27.6",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
@@ -117,12 +117,12 @@
     "@terraformer/wkt": "^2.2.1",
     "altcha": "^0.9.0",
     "angulartics2": "^12.2.0",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "bootstrap": "^5.3",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
-    "compression": "^1.7.5",
+    "compression": "^1.8.1",
     "cookie-parser": "1.4.7",
     "core-js": "^3.42.0",
     "date-fns": "^2.29.3",
@@ -150,7 +150,7 @@
     "mirador": "^3.4.3",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.16.0",
-    "morgan": "^1.10.0",
+    "morgan": "^1.10.1",
     "ng2-file-upload": "7.0.1",
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^18.0.0",
@@ -168,7 +168,7 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~18.0.0",
-    "@angular-devkit/build-angular": "^18.2.19",
+    "@angular-devkit/build-angular": "^18.2.20",
     "@angular-eslint/builder": "^18.4.1",
     "@angular-eslint/bundled-angular-compiler": "^18.4.1",
     "@angular-eslint/eslint-plugin": "^18.4.1",
@@ -176,7 +176,7 @@
     "@angular-eslint/schematics": "^18.4.1",
     "@angular-eslint/template-parser": "^18.4.1",
     "@angular-eslint/utils": "^18.4.1",
-    "@angular/cli": "^18.2.19",
+    "@angular/cli": "^18.2.20",
     "@angular/compiler-cli": "^18.2.12",
     "@angular/language-service": "^18.2.12",
     "@cypress/schematic": "^1.5.0",
@@ -206,7 +206,7 @@
     "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-dspace-angular-html": "file:./lint/dist/src/rules/html",
     "eslint-plugin-dspace-angular-ts": "file:./lint/dist/src/rules/ts",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-import-newlines": "^1.3.1",
     "eslint-plugin-jsdoc": "^45.0.0",
     "eslint-plugin-jsonc": "^2.20.1",
@@ -224,7 +224,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ng-mocks": "^14.13.4",
+    "ng-mocks": "^14.13.5",
     "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
     "postcss": "^8.5",
@@ -232,12 +232,12 @@
     "postcss-loader": "^4.0.3",
     "postcss-preset-env": "^7.4.2",
     "rimraf": "^3.0.2",
-    "sass": "~1.89.0",
+    "sass": "~1.89.2",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
     "typescript": "~5.4.5",
-    "webpack": "5.99.8",
+    "webpack": "5.99.9",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }

src/app/access-control/group-registry/group-form/members-list/members-list.component.html

@@ -83,7 +83,7 @@
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
     <div class="flex-grow-1 me-3">
-      <div class="form-group input-group me-3">
+      <div class="mb-3 input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
           class="form-control" aria-label="Search input">
         <span class="input-group-append">

src/app/access-control/group-registry/groups-registry.component.html

@@ -85,7 +85,7 @@
                         }
                         @if (!groupDto.group?.permanent && groupDto.ableToDelete) {
                           <button
-                            (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
+                            (click)="confirmDelete(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
                             title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
                             <i class="fas fa-trash-alt fa-fw"></i>
                           </button>

src/app/access-control/group-registry/groups-registry.component.spec.ts

@@ -381,6 +381,8 @@ describe('GroupsRegistryComponent', () => {
       deleteButton.click();
       fixture.detectChanges();
 
+      (document as any).querySelector('.modal-footer .confirm').click();
+
       expect(groupsDataServiceStub.delete).toHaveBeenCalledWith(mockGroups[0].id);
     });
   });

src/app/access-control/group-registry/groups-registry.component.ts

@@ -9,7 +9,10 @@ import {
   UntypedFormBuilder,
 } from '@angular/forms';
 import { RouterLink } from '@angular/router';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbModal,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
 import {
   TranslateModule,
   TranslateService,
@@ -27,6 +30,7 @@ import {
   defaultIfEmpty,
   map,
   switchMap,
+  takeUntil,
   tap,
 } from 'rxjs/operators';
 
@@ -57,6 +61,7 @@ import {
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
+import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -142,6 +147,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
               private paginationService: PaginationService,
               public requestService: RequestService,
               public dsoNameService: DSONameService,
+              private modalService: NgbModal,
   ) {
     this.currentSearchQuery = '';
     this.searchForm = this.formBuilder.group(({
@@ -314,4 +320,30 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     this.paginationService.clearPagination(this.config.id);
   }
 
+  confirmDelete(group: GroupDtoModel): void {
+    const modalRef = this.modalService.open(ConfirmationModalComponent);
+    modalRef.componentInstance.name = this.dsoNameService.getName(group.group);
+    modalRef.componentInstance.headerLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.header';
+    modalRef.componentInstance.infoLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.info';
+    modalRef.componentInstance.cancelLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.cancel';
+    modalRef.componentInstance.confirmLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.confirm';
+    modalRef.componentInstance.brandColor = 'danger';
+    modalRef.componentInstance.confirmIcon = 'fas fa-trash';
+
+    const modalSub: Subscription = modalRef.componentInstance.response.pipe(
+      takeUntil(modalRef.closed),
+    ).subscribe((result: boolean) => {
+      if (result === true) {
+        this.deleteGroup(group);
+      }
+    });
+
+    void modalRef.result.then().finally(() => {
+      modalRef.close();
+      if (modalSub && !modalSub.closed) {
+        modalSub.unsubscribe();
+      }
+    });
+  }
+
 }

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html

@@ -6,7 +6,7 @@
     <!-- In the toggle section -->
     @if (!isNewService) {
       <div class="toggle-switch-container">
-        <label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+        <label class="status-label fw-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
         <div>
           <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
           <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
@@ -17,7 +17,7 @@
     }
     <!-- In the Name section -->
     <div class="mb-5">
-      <label for="name" class="font-weight-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <label for="name" class="fw-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
         [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
         formControlName="name"
@@ -33,7 +33,7 @@
 
     <!-- In the description section -->
     <div class="mb-5 mt-5 d-flex flex-column">
-      <label for="description" class="font-weight-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+      <label for="description" class="fw-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
       class="form-control" formControlName="description" id="description" name="description"></textarea>
     </div>
@@ -42,7 +42,7 @@
       <!-- In the url section -->
       <div class="d-flex align-items-center">
         <div class="d-flex flex-column w-50 me-2">
-          <label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+          <label for="url" class="fw-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
           <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
             formControlName="url"
@@ -57,7 +57,7 @@
         </div>
 
         <div class="d-flex flex-column w-50">
-          <label for="score" class="font-weight-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+          <label for="score" class="fw-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
           <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
             [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
             id="score"
@@ -78,7 +78,7 @@
 
     <!-- In the IP range section -->
     <div class="mb-5 mt-5">
-      <label for="lowerIp" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
+      <label for="lowerIp" class="fw-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
       <div class="d-flex">
         <input [class.invalid-field]="formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched"
           [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control me-2"
@@ -105,7 +105,7 @@
 
     <!-- In the ldnUrl section -->
     <div class="mb-5 mt-5">
-      <label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+      <label for="ldnUrl" class="fw-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
       <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
         [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
         formControlName="ldnUrl"
@@ -130,7 +130,7 @@
 
     <!-- In the usesActorEmailId section -->
     <div class="mb-5 mt-5">
-      <label class="status-label font-weight-bold" for="usesActorEmailId">{{ 'ldn-service-usesActorEmailId' | translate }}</label>
+      <label class="status-label fw-bold" for="usesActorEmailId">{{ 'ldn-service-usesActorEmailId' | translate }}</label>
       <div>
         <input formControlName="usesActorEmailId" hidden id="usesActorEmailId"
                name="usesActorEmailId" type="checkbox">
@@ -149,14 +149,14 @@
     @if (areControlsInitialized) {
       <div class="row mb-1 mt-5">
         <div class="col">
-          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+          <label class="fw-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
         </div>
         @if (formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern) {
           <div class="col">
-            <label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+            <label class="fw-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
           </div>
           <div class="col-sm-1">
-            <label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+            <label class="fw-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
           </div>
         }
         <div class="col-sm-2">
@@ -295,8 +295,8 @@
     <span (click)="addInboundPattern()"
     class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
     <hr>
-      <div class="form-group row">
-        <div class="col text-right space-children-mr">
+      <div class="mb-3 row">
+        <div class="col text-end space-children-mr">
           <ng-content select="[before]"></ng-content>
           <button (click)="resetFormAndLeave()" class="btn btn-outline-secondary" type="button">
             <span>&nbsp;{{ 'submission.general.back.submit' | translate }}</span>
@@ -317,9 +317,7 @@
       @if (isNewService) {
         <h4>{{'service.overview.create.modal' | translate }}</h4>
       }
-      <button (click)="closeModal()" aria-label="Close"
-        class="close" type="button">
-        <span aria-hidden="true">×</span>
+      <button (click)="closeModal()" aria-label="Close" class="btn-close" type="button">
       </button>
     </div>
 

src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html

@@ -77,8 +77,7 @@
       </div>
       <button (click)="closeModal()" aria-label="Close"
         [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
-        class="close" type="button">
-        <span aria-hidden="true">×</span>
+        class="btn-close" type="button">
       </button>
     </div>
 
@@ -86,7 +85,7 @@
       <div>
         {{ 'service.overview.delete.body' | translate }}
       </div>
-      <div class="mt-4 text-right">
+      <div class="mt-4 text-end">
         <button (click)="closeModal()"
           [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
         class="btn btn-outline-secondary me-2">{{ 'service.detail.delete.cancel' | translate }}</button>

src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.html

@@ -1,15 +1,14 @@
 <div class="modal-header">
   <h4 class="modal-title">{{'notify-message-modal.title' | translate}}</h4>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-    <span aria-hidden="true">&times;</span>
+  <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
   </button>
 </div>
 <div class="modal-body p-4">
   @for (key of notifyMessageKeys; track key) {
     <div>
       <div class="row mb-4">
-        <div class="font-weight-bold col">{{ key + '.notify-detail-modal' | translate}}</div>
-        <div class="col text-right">{{'notify-detail-modal.' + notifyMessage[key] | translate: {default: notifyMessage[key] ?? "n/a" } }}</div>
+        <div class="fw-bold col">{{ key + '.notify-detail-modal' | translate}}</div>
+        <div class="col text-end">{{'notify-detail-modal.' + notifyMessage[key] | translate: {default: notifyMessage[key] ?? "n/a" } }}</div>
       </div>
     </div>
   }

src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html

@@ -1,6 +1,6 @@
 <div class="container my-4">
   <div class="row">
-    <div class="col-12 col-md-3 text-left h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}</div>
+    <div class="col-12 col-md-3 text-start h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}</div>
     <div class="col-md-9">
       <div class="h4">
         @if ((selectedSearchConfig$ | async) !== defaultConfiguration) {

src/app/admin/admin-reports/filtered-items/filtered-items.component.html

@@ -15,7 +15,7 @@
                 <ds-loading></ds-loading>
               }
               @if ((loadingCollections$ | async) !== true) {
-                <select id="collSel" name="collSel" class="form-control" multiple="multiple" size="10" formControlName="collections">
+                <select id="collSel" name="collSel" class="form-select" multiple="multiple" size="10" formControlName="collections">
                   @for (item of collections; track item) {
                     <option [value]="item.id" [disabled]="item.disabled">{{item.name$ | async}}</option>
                   }
@@ -32,11 +32,11 @@
               {{'admin.reports.items.section.metadataFieldQueries' | translate}}
             </ng-template>
             <ng-template ngbPanelContent>
-              <fieldset id="predefqueries" class="form-group">
+              <fieldset id="predefqueries" class="mb-3">
                 <label>
                   {{'admin.reports.items.predefinedQueries' | translate}}
                 </label>
-                <select id="predefselect" formControlName="presetQuery" class="form-control" (change)="setPresetQuery()">
+                <select id="predefselect" formControlName="presetQuery" class="form-select" (change)="setPresetQuery()">
                   @for (item of presetQueries; track item.id) {
                     <option [value]="item.id" [selected]="item.isDefault">{{item.label | translate}}</option>
                   }
@@ -46,17 +46,17 @@
               <div id="queries">
                 @for (pred of queryPredicatesArray().controls; track pred; let i = $index) {
                   <div class="metadata">
-                    <div [formGroup]="pred" class="form-group">
-                      <div class="form-row">
+                    <div [formGroup]="pred" class="mb-3">
+                      <div class="row">
                         <div class="col-4">
-                          <select class="query-tool" formControlName="field" class="form-control">
+                          <select class="query-tool" formControlName="field" class="form-select">
                             @for (item of metadataFieldsWithAny; track item) {
                               <option [value]="item.id">{{item.name$ | async}}</option>
                             }
                           </select>
                         </div>
                         <div class="col-auto">
-                          <select class="query-tool" formControlName="operator" class="form-control">
+                          <select class="query-tool" formControlName="operator" class="form-select">
                             @for (item of predicates; track item) {
                               <option [value]="item.id">{{item.name$ | async | translate}}</option>
                             }
@@ -86,17 +86,17 @@
               {{'admin.reports.items.section.limitPaginateQueries' | translate}}
             </ng-template>
             <ng-template ngbPanelContent>
-              <div class="row align-items-center">
+              <div class="row align-items-center mb-3">
                 <label for="limit" class="col-sm-2 col-form-label">{{'admin.reports.items.limit' | translate}}:</label>
                 <div class="col-6">
-                  <select id="limit" name="limit" formControlName="pageLimit" class="form-control col-6">
+                  <select id="limit" name="limit" formControlName="pageLimit" class="form-select col-6">
                     @for (item of pageLimits; track item) {
                       <option value="{{item.id}}" [selected]="item.isDefault">{{item.name$ | async}}</option>
                     }
                   </select>
                 </div>
               </div>
-              <div class="row align-items-center">
+              <div class="row align-items-center mb-3">
                 <label for="offset" class="col-sm-2 col-form-label">{{'admin.reports.items.offset' | translate}}:</label>
                 <div class="col-6">
                   <input id="offset" name="offset" value="0" class="form-control col-6">
@@ -104,7 +104,7 @@
               </div>
               <div class="row">
                 <span class="col-3"></span>
-                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                <button class="btn btn-primary col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
               </div>
             </ng-template>
           </ngb-panel>
@@ -130,7 +130,7 @@
             </ng-template>
             <ng-template ngbPanelContent>
               <div id="show-fields">
-                <select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-control" formControlName="additionalFields">
+                <select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-select" formControlName="additionalFields">
                   @for (item of metadataFields; track item) {
                     <option [value]="item.id">{{item.name$ | async}}</option>
                   }

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -1,12 +1,12 @@
 .nav-breadcrumb {
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
 }
 
 .breadcrumb {
   border-radius: 0;
   padding-bottom: calc(var(--ds-content-spacing) / 2);
   padding-top: calc(var(--ds-content-spacing) / 2);
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
   padding-left: calc(var(--bs-spacer) *.75);
   padding-right: calc(var(--bs-spacer) *.75);
 }

src/app/browse-by/browse-by-geospatial-data/browse-by-geospatial-data.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>{{ 'browse.metadata.map' | translate }}</h1>
-  @if (isPlatformBrowser(platformId)) {
+  @defer {
     <ds-geospatial-map [facetValues]="facetValues$"
                        [currentScope]="this.scope$|async"
                        [layout]="'browse'"

src/app/browse-by/browse-by-geospatial-data/browse-by-geospatial-data.component.ts

@@ -1,14 +1,11 @@
 import {
   AsyncPipe,
   isPlatformBrowser,
-  NgIf,
 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
   OnInit,
-  PLATFORM_ID,
 } from '@angular/core';
 import {
   ActivatedRoute,
@@ -47,7 +44,6 @@ import { PaginatedSearchOptions } from '../../shared/search/models/paginated-sea
   imports: [
     AsyncPipe,
     GeospatialMapComponent,
-    NgIf,
     TranslateModule,
   ],
   standalone: true,
@@ -67,7 +63,6 @@ export class BrowseByGeospatialDataComponent implements OnInit {
   public facetValues$: Observable<FacetValues> = of(null);
 
   constructor(
-    @Inject(PLATFORM_ID) public platformId: string,
     private searchConfigurationService: SearchConfigurationService,
     private searchService: SearchService,
     protected route: ActivatedRoute,

src/app/community-list-page/community-list/community-list.component.html

@@ -12,7 +12,7 @@
       <div class="align-middle my-auto">
         @if ((dataSource.loading$ | async) !== true) {
           <button (click)="getNextPage(node)"
-            class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
+            class="btn btn-outline-primary btn-sm" role="button" tabindex="0" data-test="show-more-button">
             <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
           </button>
         }

src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html

@@ -19,7 +19,7 @@
     [innerHTML]="mdRepresentation.getValue()"
   [ngbTooltip]="mdRepresentation.allMetadata(['person.jobTitle']).length > 0 ? descTemplate : null"></a>
   @if (mdRepresentation.firstMetadata('person.identifier.orcid')) {
-    <ds-orcid-badge-and-tooltip class="ml-1"
+    <ds-orcid-badge-and-tooltip class="ms-1"
       [orcid]="mdRepresentation.firstMetadata('person.identifier.orcid')"
       [authenticatedTimestamp]="mdRepresentation.firstMetadata('dspace.orcid.authenticated')">
     </ds-orcid-badge-and-tooltip>

src/app/external-log-in/email-confirmation/confirm-email/confirm-email.component.html

@@ -3,8 +3,8 @@
 </h4>
 
 <form [formGroup]="emailForm" (ngSubmit)="submitForm()">
-  <div class="form-group">
-    <div class="form-row">
+  <div class="mb-3">
+    <div class="row">
       <div class="col-12 my-2">
         <input
           type="email"
@@ -26,7 +26,7 @@
         }
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="col-12">
         <button type="submit" class="btn btn-lg btn-primary w-100">
           {{ "external-login.confirm.button.label" | translate }}

src/app/external-log-in/email-confirmation/provide-email/provide-email.component.html

@@ -3,8 +3,8 @@
 </h4>
 
 <form [formGroup]="emailForm" (ngSubmit)="submitForm()">
-  <div class="form-group">
-    <div class="form-row">
+  <div class="mb-3">
+    <div class="row">
       <div class="col-12 my-2">
         <input
           type="email"
@@ -26,7 +26,7 @@
         }
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="col-12">
         <button type="submit" class="btn btn-lg btn-primary w-100">
           {{ "external-login.provide-email.button.label" | translate }}

src/app/external-log-in/registration-types/orcid-confirmation/orcid-confirmation.component.html

@@ -1,6 +1,6 @@
 <form class="form-login"
       [formGroup]="form" novalidate>
-  <label class="font-weight-bold mb-0 text-uppercase">{{ registrationData.registrationType }}</label>
+  <label class="fw-bold mb-0 text-uppercase">{{ registrationData.registrationType }}</label>
   <input [attr.aria-label]="'external-login-page.orcid-confirmation.netid.label' | translate"
          autocomplete="off"
          autofocus
@@ -9,14 +9,14 @@
          [placeholder]="'external-login-page.orcid-confirmation.netid.placeholder' | translate"
          type="text"
          [attr.data-test]="'netId' | dsBrowserOnly">
-  <label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.lastname" | translate}}</label>
+  <label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.lastname" | translate}}</label>
   <input [attr.aria-label]="'external-login-page.orcid-confirmation.lastname.label' | translate"
          autocomplete="off"
          class="form-control form-control-lg position-relative mb-2"
          formControlName="lastname"
          type="text"
          [attr.data-test]="'lastname' | dsBrowserOnly">
-  <label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.firstname" | translate}}</label>
+  <label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.firstname" | translate}}</label>
   <input [attr.aria-label]="'external-login-page.orcid-confirmation.firstname.label' | translate"
         autocomplete="off"
         class="form-control form-control-lg position-relative mb-2"
@@ -24,7 +24,7 @@
         type="text"
         [attr.data-test]="'firstname' | dsBrowserOnly">
   @if (registrationData?.email) {
-    <label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.email" | translate}}</label>
+    <label class="fw-bold mb-0">{{"external-login-page.orcid-confirmation.email" | translate}}</label>
     <input [attr.aria-label]="'external-login-page.orcid-confirmation.email.label' | translate"
           autocomplete="off"
           class="form-control form-control-lg position-relative"

src/app/external-login-review-account-info-page/review-account-info/review-account-info.component.html

@@ -6,15 +6,15 @@
     <thead class="thead-light">
       <tr>
         <th scope="col">
-          <span class="h5 font-weight-bold">{{ 'external-login-validation.review-account-info.table.header.information' | translate }}</span>
+          <span class="h5 fw-bold">{{ 'external-login-validation.review-account-info.table.header.information' | translate }}</span>
         </th>
         <th scope="col">
-          <span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.received-value' | translate }}</span>
+          <span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.received-value' | translate }}</span>
         </th>
         <th scope="col">
-          <span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.current-value' | translate }}</span>
+          <span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.current-value' | translate }}</span>
         </th>
-        <th scope="col"><span class="h5 font-weight-bold">{{'external-login-validation.review-account-info.table.header.action' | translate }}</span></th>
+        <th scope="col"><span class="h5 fw-bold">{{'external-login-validation.review-account-info.table.header.action' | translate }}</span></th>
       </tr>
     </thead>
     <tbody>

src/app/home-page/home-news/home-news.component.html

@@ -1,4 +1,4 @@
-<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-ncs mb-4">
+<div class="home-news-content py-4 px-2 py-sm-5 px-sm-0 mt-ncs mb-4">
   <div class="container">
     <div class="d-flex flex-wrap">
       <div>

src/app/home-page/home-news/home-news.component.scss

@@ -6,7 +6,7 @@
     word-break: break-word;
 }
 
-.jumbotron {
+.home-news-content {
   background-color: var(--ds-home-news-background-color);
 }
 

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -2,7 +2,7 @@
   <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
 
   <form>
-    <div class="form-group row">
+    <div class="mb-3 row">
       <label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
       </label>
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="form-group row">
+    <div class="mb-3 row">
       <label [for]="'notificationTimeOutInput'" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
       </label>
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <div class="form-group row">
+    <div class="mb-3 row">
       <label [for]="'liveRegionTimeOutInput'" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.liveRegionTimeOut.label' | translate }}
       </label>
@@ -77,7 +77,7 @@
     </div>
 
     <div role="group">
-      <button type="submit" (click)="saveSettings()" class="btn btn-primary mr-2">
+      <button type="submit" (click)="saveSettings()" class="btn btn-primary me-2">
         {{ 'info.accessibility-settings.submit' | translate }}
       </button>
       <button (click)="resetSettings()" class="btn btn-warning">

src/app/item-page/bitstreams/request-a-copy/altcha-captcha.component.ts

@@ -1,7 +1,3 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
 import {
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -11,21 +7,14 @@ import {
   Output,
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { VarDirective } from '../../../shared/utils/var.directive';
-
 @Component({
   selector: 'ds-altcha-captcha',
   templateUrl: './altcha-captcha.component.html',
   imports: [
-    AsyncPipe,
-    NgIf,
     ReactiveFormsModule,
-    RouterLink,
     TranslateModule,
-    VarDirective,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   standalone: true,

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html

@@ -58,13 +58,13 @@
       <div class="row mb-4">
         <div class="col-12">
           <div>{{'bitstream-request-a-copy.allfiles.label' |translate}}</div>
-          <div class="ms-4 form-check">
+          <div class="ms-2 form-check">
             <input [className]="'form-check-input'" type="radio"
               id="allfiles-true" formControlName="allfiles" value="true">
             <label class="form-check-label"
             for="allfiles-true">{{'bitstream-request-a-copy.files-all-true.label' | translate}}</label>
           </div>
-          <div class="ms-4">
+          <div class="ms-2 form-check">
             <input [className]="'form-check-input'" type="radio"
               id="allfiles-false" formControlName="allfiles" value="false" [attr.disabled]="bitstream === undefined ? true : null ">
             <label class="form-check-label"

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts

@@ -1,6 +1,6 @@
 import {
   AsyncPipe,
-  CommonModule,
+  NgClass,
 } from '@angular/common';
 import {
   ChangeDetectorRef,
@@ -72,8 +72,8 @@ import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/i
     AlertComponent,
     AsyncPipe,
     BtnDisabledDirective,
-    CommonModule,
     ItemEditBitstreamBundleComponent,
+    NgClass,
     RouterLink,
     ThemedLoadingComponent,
     TranslateModule,

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -14,7 +14,7 @@
         <table class="table" [class.mt-n1]="!isFirstTable"
           [attr.aria-label]="'item.edit.bitstreams.bundle.table.aria-label' | translate: { bundle: bundleName } ">
           <thead [class.visually-hidden]="!isFirstTable">
-            <tr class="header-row font-weight-bold">
+            <tr class="header-row fw-bold">
               <th id="name" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
                 {{'item.edit.bitstreams.headers.name' | translate}}
               </th>
@@ -31,10 +31,10 @@
           </thead>
           <tbody cdkDropList (cdkDropListDropped)="drop($event)">
             <tr class="bundle-row">
-              <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
+              <th id="{{ bundleName }}" class="row-element" colspan="3" scope="colgroup">
                 {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
               </th>
-              <td class="text-center">
+              <td class="text-center row-element">
                 <div class="btn-group">
                   <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
                     [queryParams]="{bundle: bundle.id}"
@@ -43,9 +43,9 @@
                     title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
                     <i class="fas fa-upload fa-fw"></i>
                   </button>
-                  <div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-right btn-sm p-0"
-                    placement="bottom-right">
-                    <button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle
+                  <div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-end p-0"
+                       container="body" placement="bottom-right">
+                    <button class="btn btn-outline-secondary btn-sm" id="paginationControls" ngbDropdownToggle
                       [title]="'pagination.options.description' | translate"
                       [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true"
                       aria-expanded="false">
@@ -79,7 +79,7 @@
                   (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()">
                   <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
                     scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
-                    <div class="drag-handle text-muted float-left p-1 mr-2 d-inline" tabindex="0" cdkDragHandle
+                    <div class="drag-handle text-muted float-start p-1 me-2 d-inline" tabindex="0" cdkDragHandle
                       (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
                       <i class="fas fa-grip-vertical fa-fw"
                       [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>

src/app/item-page/edit-item-page/item-operation/item-operation.component.html

@@ -1,5 +1,5 @@
 <div class="col-12 col-md-3 h-auto float-start d-flex action-label">
-  <span class="justify-content-center align-self-center font-weight-bold">
+  <span class="justify-content-center align-self-center fw-bold">
     {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
   </span>
 </div>

src/app/item-page/edit-item-page/item-status/item-status.component.html

@@ -2,7 +2,7 @@
 <div class="row">
   @for (statusKey of statusDataKeys; track statusKey) {
     <div class="w-100 pt-1">
-      <div class="col-12 col-md-3 float-start status-label font-weight-bold">
+      <div class="col-12 col-md-3 float-start status-label fw-bold">
         {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
       </div>
       <div class="col-12 col-md-9 float-start status-data" id="status-{{statusKey}}">
@@ -15,17 +15,17 @@
     <div class="w-100 pt-1">
       @if ((identifier.identifierType==='doi')) {
         <div>
-          <div class="col-12 col-md-3 float-start status-label font-weight-bold">
+          <div class="col-12 col-md-3 float-start status-label fw-bold">
             {{identifier.identifierType.toLocaleUpperCase()}}
           </div>
-          <div class="col-12 col-md-9 float-start status-label font-weight-bold">{{identifier.value}}
+          <div class="col-12 col-md-9 float-start status-label fw-bold">{{identifier.value}}
           ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
         </div>
       }
     </div>
   }
 
-  <div class="col-12 col-md-3 float-start status-label font-weight-bold">
+  <div class="col-12 col-md-3 float-start status-label fw-bold">
     {{'item.edit.tabs.status.labels.itemPage' | translate}}:
   </div>
   <div class="col-12 col-md-9 float-start status-data" id="status-itemPage">

src/app/item-page/orcid-page/orcid-page.component.ts

@@ -1,5 +1,5 @@
 import {
-  CommonModule,
+  AsyncPipe,
   isPlatformBrowser,
 } from '@angular/common';
 import {
@@ -54,7 +54,7 @@ import { OrcidSyncSettingsComponent } from './orcid-sync-settings/orcid-sync-set
   styleUrls: ['./orcid-page.component.scss'],
   imports: [
     AlertComponent,
-    CommonModule,
+    AsyncPipe,
     OrcidAuthComponent,
     OrcidQueueComponent,
     OrcidSyncSettingsComponent,

src/app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component.html

@@ -1,12 +1,14 @@
 @if (isNotEmpty(points) || isNotEmpty(bboxes)) {
   <div>
     <ds-metadata-field-wrapper [label]="label | translate">
+      @defer {
         <ds-geospatial-map [coordinates]="this.points"
                            [bbox]="this.bboxes"
                            [cluster]="this.cluster"
                            [layout]="'item'"
                            style="width: 100%;">
         </ds-geospatial-map>
+      }
     </ds-metadata-field-wrapper>
   </div>
 }

src/app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component.spec.ts

@@ -63,13 +63,15 @@ describe('GeospatialItemPageFieldComponent', () => {
     fixture = TestBed.createComponent(GeospatialItemPageFieldComponent);
     comp = fixture.componentInstance;
     comp.item = mockItemWithMetadataFieldsAndValue([mockField], mockValue);
-    comp.fields = mockFields;
+    comp.pointFields = mockFields;
+    comp.bboxFields = mockFields;
     comp.label = mockLabel;
 
     fixture.detectChanges();
   }));
 
   it('should initialize a map from passed points', () => {
-    expect(fixture.nativeElement.querySelector('ds-geospatial-map[ng-reflect-coordinates="Point ( +174.000000 -042.00000"]')).toBeTruthy();
+    expect(comp.bboxes).toContain(mockValue);
+    expect(comp.points).toContain(mockValue);
   });
 });

src/app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component.ts

@@ -1,10 +1,9 @@
-import { NgIf } from '@angular/common';
 import {
   Component,
   Input,
   OnInit,
 } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Item } from '../../../../../core/shared/item.model';
 import {
@@ -21,8 +20,7 @@ import { ItemPageFieldComponent } from '../item-page-field.component';
   imports: [
     GeospatialMapComponent,
     MetadataFieldWrapperComponent,
-    NgIf,
-    TranslateModule,
+    TranslatePipe,
   ],
   standalone: true,
 })

src/app/notifications/qa/events/quality-assurance-events.component.html

@@ -301,7 +301,7 @@
   <div class="modal-body">
     <p>{{'quality-assurance.event.accept.description' | translate}}</p>
 
-    <button class="btn btn-outline-success float-right" (click)="modal.close('do')">
+    <button class="btn btn-outline-success float-end" (click)="modal.close('do')">
       <i class="fas fa-check"></i>
       <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.import' | translate}}</span>
     </button>
@@ -318,7 +318,7 @@
   </div>
   <div class="modal-body">
     <p>{{'quality-assurance.event.ignore.description' | translate}}</p>
-    <button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
+    <button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
       <i class="fas fa-trash-alt"></i>
       <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.ignore' | translate}}</span>
     </button>
@@ -335,7 +335,7 @@
   </div>
   <div class="modal-body">
     <p>{{'quality-assurance.event.reject.description' | translate}}</p>
-    <button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
+    <button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
       <i class="fas fa-trash-alt"></i>
       <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.reject' | translate}}</span>
     </button>
@@ -352,7 +352,7 @@
   </div>
   <div class="modal-body">
     <p>{{'quality-assurance.event.undo.description' | translate}}</p>
-    <button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
+    <button class="btn btn-outline-danger float-end" (click)="modal.close('do')">
       <i class="fas fa-trash-alt"></i>
       <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.undo' | translate}}</span>
     </button>

src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html

@@ -1,8 +1,7 @@
 <div class="modal-header">
   <h4 class="modal-title" id="modal-title">{{ (labelPrefix + label + '.title') | translate }}</h4>
-  <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title"
+  <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
     (click)="close()">
-    <span aria-hidden="true">&times;</span>
   </button>
 </div>
 <div class="modal-body">

src/app/notifications/suggestions/popup/suggestions-popup.component.html

@@ -2,14 +2,13 @@
   <div class="notifications-wrapper position-fixed top right">
     <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
       <button (click)="removePopup()"
-        type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+        type="button" class="close pt-0 pe-1 pe-0 pb-0" data-bs-dismiss="alert" aria-label="Close">
       </button>
       <div class="d-flex flex-row">
         <div class="d-flex flex-column justify-content-center align-items-center">
           <div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
         </div>
-        <div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
+        <div class="d-flex flex-column justify-content-center align-content-stretch text-start p-2">
           @if ((suggestionsRD$ | async); as suggestions) {
             @for (suggestion of suggestions; track suggestion) {
               <ng-container class="alert alert-info">

src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html

@@ -4,7 +4,7 @@
   </span>
   <span class="file-name ms-1">{{fileObject?.name}}</span>
 </label>
-<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
+<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
 @if (file.invalid && (file.dirty || file.touched)) {
   <div
     class="alert alert-danger validation-error">

src/app/request-copy/email-request-copy/email-request-copy.component.html

@@ -16,7 +16,7 @@
   <!-- Display access periods if more than one was bound to input. The parent component (grant-request-copy)
        sends an empty list if the feature is not enabled or applicable to this request. -->
   @if (hasValue(validAccessPeriods$ | async) && (validAccessPeriods$ | async).length > 0) {
-    <div class="form-group">
+    <div class="mb-3">
       <label for="accessPeriod">{{ 'grant-request-copy.access-period.header' | translate }}</label>
       <div ngbDropdown class="d-block">
         <!-- Show current selected access period (defaults to first in array) -->

src/app/request-copy/grant-request-copy/grant-request-copy.component.ts

@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  CommonModule,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnInit,
@@ -49,7 +46,6 @@ import { ThemedEmailRequestCopyComponent } from '../email-request-copy/themed-em
   standalone: true,
   imports: [
     AsyncPipe,
-    CommonModule,
     FormsModule,
     RouterLink,
     ThemedEmailRequestCopyComponent,

src/app/search-navbar/search-navbar.component.html

@@ -3,7 +3,7 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p1"
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"
              [attr.data-test]="'header-search-box' | dsBrowserOnly">

src/app/shared/alert/alert.component.html

@@ -5,7 +5,7 @@
     }
     <ng-content></ng-content>
     @if (dismissible) {
-      <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismiss()">
       </button>
     }
   </div>

src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html

@@ -51,7 +51,7 @@
         @if (hasCustomGroup$ | async) {
           <button
             class="btn btn-danger delete"
-            (click)="delete()">
+            (click)="confirmDelete(dsoNameService.getName(group))">
             <i class="fas fa-trash" aria-hidden="true"></i> {{'comcol-role.edit.delete' | translate}}
           </button>
         }

src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts

@@ -10,6 +10,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
@@ -36,17 +37,22 @@ describe('ComcolRoleComponent', () => {
   let comcolRole;
   let notificationsService;
 
-  const requestService = { hasByHref$: () => of(true) };
+  const requestService = {
+    hasByHref$: () => of(true),
+    setStaleByHrefSubstring: () => of(true),
+  };
 
   const groupService = {
     findByHref: jasmine.createSpy('findByHref'),
     createComcolGroup: jasmine.createSpy('createComcolGroup').and.returnValue(of({})),
     deleteComcolGroup: jasmine.createSpy('deleteComcolGroup').and.returnValue(of({})),
+    clearGroupsRequests: jasmine.createSpy('clearGroupsRequests'),
   };
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        NgbModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot(),
         NoopAnimationsModule,
@@ -178,13 +184,17 @@ describe('ComcolRoleComponent', () => {
       fixture.detectChanges();
     });
 
+    afterEach(() => {
+      const modal = document.querySelector('ds-confirmation-modal');
+      if (modal) {
+        modal.remove();
+      }
+    });
+
     it('should have a delete button but no create or restrict button', (done) => {
-      expect(de.query(By.css('.btn.create')))
-        .toBeNull();
-      expect(de.query(By.css('.btn.restrict')))
-        .toBeNull();
-      expect(de.query(By.css('.btn.delete')))
-        .toBeTruthy();
+      expect(de.query(By.css('.btn.create'))).toBeNull();
+      expect(de.query(By.css('.btn.restrict'))).toBeNull();
+      expect(de.query(By.css('.btn.delete'))).toBeTruthy();
       done();
     });
 
@@ -195,6 +205,7 @@ describe('ComcolRoleComponent', () => {
       });
 
       it('should call the groupService delete method', (done) => {
+        (document as any).querySelector('.modal-footer .confirm').click();
         expect(groupService.deleteComcolGroup).toHaveBeenCalled();
         done();
       });
@@ -207,9 +218,11 @@ describe('ComcolRoleComponent', () => {
       });
 
       it('should show an error notification', (done) => {
+        (document as any).querySelector('.modal-footer .confirm').click();
         expect(notificationsService.error).toHaveBeenCalled();
         done();
       });
     });
+
   });
 });

src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   TranslateModule,
   TranslateService,
@@ -12,11 +13,13 @@ import {
 import {
   BehaviorSubject,
   Observable,
+  Subscription,
 } from 'rxjs';
 import {
   filter,
   map,
   switchMap,
+  takeUntil,
 } from 'rxjs/operators';
 
 import { getGroupEditRoute } from '../../../../../access-control/access-control-routing-paths';
@@ -34,6 +37,7 @@ import {
   getFirstCompletedRemoteData,
 } from '../../../../../core/shared/operators';
 import { AlertComponent } from '../../../../alert/alert.component';
+import { ConfirmationModalComponent } from '../../../../confirmation-modal/confirmation-modal.component';
 import {
   hasNoValue,
   hasValue,
@@ -115,6 +119,7 @@ export class ComcolRoleComponent implements OnInit {
     protected notificationsService: NotificationsService,
     protected translateService: TranslateService,
     public dsoNameService: DSONameService,
+    private modalService: NgbModal,
   ) {
   }
 
@@ -215,4 +220,31 @@ export class ComcolRoleComponent implements OnInit {
 
     this.roleName$ = this.translateService.get(`comcol-role.edit.${this.comcolRole.name}.name`);
   }
+
+  confirmDelete(groupName: string): void {
+    const modalRef = this.modalService.open(ConfirmationModalComponent);
+
+    modalRef.componentInstance.name = groupName;
+    modalRef.componentInstance.headerLabel = 'comcol-role.edit.delete.modal.header';
+    modalRef.componentInstance.infoLabel = 'comcol-role.edit.delete.modal.info';
+    modalRef.componentInstance.cancelLabel = 'comcol-role.edit.delete.modal.cancel';
+    modalRef.componentInstance.confirmLabel = 'comcol-role.edit.delete.modal.confirm';
+    modalRef.componentInstance.brandColor = 'danger';
+    modalRef.componentInstance.confirmIcon = 'fas fa-trash';
+
+    const modalSub: Subscription = modalRef.componentInstance.response.pipe(
+      takeUntil(modalRef.closed),
+    ).subscribe((result: boolean) => {
+      if (result === true) {
+        this.delete();
+      }
+    });
+
+    void modalRef.result.then().finally(() => {
+      modalRef.close();
+      if (modalSub && !modalSub.closed) {
+        modalSub.unsubscribe();
+      }
+    });
+  }
 }

src/app/shared/confirmation-modal/confirmation-modal.component.scss

@@ -0,0 +1,7 @@
+:host {
+  .modal {
+    &-body, &-header {
+      word-break: break-word;
+    }
+  }
+}

src/app/shared/confirmation-modal/confirmation-modal.component.ts

@@ -11,6 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
 @Component({
   selector: 'ds-confirmation-modal',
   templateUrl: 'confirmation-modal.component.html',
+  styleUrls: ['confirmation-modal.component.scss'],
   standalone: true,
   imports: [
     TranslateModule,

src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html

@@ -3,22 +3,20 @@
     @if (this.canWithdraw) {
       <div class="modal-header">
         {{ 'item.qa.withdrawn.modal.header' | translate }}
-        <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-          <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
         </button>
       </div>
     } @else {
       @if (!this.canWithdraw) {
         <div class="modal-header">
           {{'item.qa.reinstate.modal.header' | translate}}
-          <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-            <span aria-hidden="true">×</span>
+          <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
           </button>
         </div>
       }
     }
     <div class="modal-body">
-      <div class="form-group">
+      <div class="mb-3">
         <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary.label' | translate)
         : ('qa-reinstate.create.modal.form.summary.label' | translate) }}</label>
         <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary2.label' | translate)

src/app/shared/file-download-link/file-download-link.component.html

@@ -14,7 +14,7 @@
     <span role="img"
     [attr.aria-label]="'file-download-link.restricted' | translate"
     [title]="'file-download-link.restricted' | translate"
-    class="pr-1">
+    class="pe-1">
       <i class="fas fa-lock"></i>
     </span>
   } @else if ((canDownloadWithToken$ | async) && (canDownload$ | async) === false) {
@@ -22,7 +22,7 @@
     <span role="img"
     [attr.aria-label]="'file-download-link.secure-access' | translate"
     [title]="'file-download-link.secure-access' | translate"
-    class="pr-1 request-a-copy-access-icon">
+    class="pe-1 request-a-copy-access-icon">
       <i class="fa-solid fa-lock-open"></i>
     </span>
   } @else if (showIcon) {

src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="group" [ngClass]="getClass('element', 'container')" class="form-check custom-control form-switch" [class.disabled]="model.disabled">
-  <input type="checkbox" class="form-check-input custom-control-input"
+  <input type="checkbox" class="form-check-input form-check-input"
          [checked]="model.checked"
          [class.is-invalid]="showErrorMessages"
          [id]="id"
@@ -13,7 +13,7 @@
          (blur)="onBlur($event)"
          (change)="onChange($event)"
          (focus)="onFocus($event)"/>
-  <label class="form-check-label custom-control-label" [for]="bindId && model.id">
+  <label class="form-check-label form-check-label" [for]="bindId && model.id">
     <span [innerHTML]="model.label | translate"
           [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></span>
   </label>

src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.scss

@@ -1,16 +0,0 @@
-div.custom-switch {
-  &.custom-control-right {
-    margin-left: 0;
-    margin-right: 0;
-
-    &::after {
-      right: -1.5rem;
-      left: auto;
-    }
-
-    &::before {
-      right: -2.35rem;
-      left: auto;
-    }
-  }
-}

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html

@@ -24,38 +24,40 @@
 
 @if ((isHierarchicalVocabulary() | async) !== true) {
   <div class="position-relative right-addon">
-    @if (searching || loadingInitialValue) {
-      <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
-    }
-    @if (!searching && !loadingInitialValue) {
-      <i
-        dsAuthorityConfidenceState
-        class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
-        aria-hidden="true"
-        [authorityValue]="currentValue"
-      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
-    }
+    <div class="authority-icons position-absolute d-flex align-items-center">
+      @if (searching || loadingInitialValue) {
+        <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary my-auto p-0" aria-hidden="true"></i>
+      }
+      @if (!searching && !loadingInitialValue) {
+        <i
+          dsAuthorityConfidenceState
+          class="far fa-circle fa-2x fa-fw my-auto p-0"
+          aria-hidden="true"
+          [authorityValue]="currentValue"
+          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
+      }
+    </div>
     <input #instance="ngbTypeahead"
-      class="form-control"
-      [attr.aria-labelledby]="'label_' + model.id"
-      [attr.autoComplete]="model.autoComplete"
-      [attr.aria-label]="model.label | translate"
-      [class.is-invalid]="showErrorMessages"
-      [id]="model.id"
-      [inputFormatter]="formatter"
-      [name]="model.name"
-      [ngbTypeahead]="search"
-      [placeholder]="model.placeholder"
-      [readonly]="model.readOnly"
-      [disabled]="model.readOnly"
-      [resultTemplate]="rt"
-      [type]="model.inputType"
-      [(ngModel)]="currentValue"
-      (blur)="onBlur($event)"
-      (focus)="onFocus($event)"
-      (change)="onChange($event)"
-      (input)="onInput($event)"
-      (selectItem)="onSelectItem($event)">
+           class="form-control"
+           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.autoComplete]="model.autoComplete"
+           [attr.aria-label]="model.label | translate"
+           [class.is-invalid]="showErrorMessages"
+           [id]="model.id"
+           [inputFormatter]="formatter"
+           [name]="model.name"
+           [ngbTypeahead]="search"
+           [placeholder]="model.placeholder"
+           [readonly]="model.readOnly"
+           [disabled]="model.readOnly"
+           [resultTemplate]="rt"
+           [type]="model.inputType"
+           [(ngModel)]="currentValue"
+           (blur)="onBlur($event)"
+           (focus)="onFocus($event)"
+           (change)="onChange($event)"
+           (input)="onInput($event)"
+           (selectItem)="onSelectItem($event)">
     @if (searchFailed) {
       <div class="invalid-feedback">Sorry, suggestions could not be loaded.</div>
     }
@@ -65,25 +67,25 @@
 @if ((isHierarchicalVocabulary() | async)) {
   <div class="position-relative right-addon">
     <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
-    aria-hidden="true"></i>
+       aria-hidden="true"></i>
     <input class="form-control"
-      [attr.aria-labelledby]="'label_' + model.id"
-      [attr.autoComplete]="model.autoComplete"
-      [attr.aria-label]="model.label | translate"
-      [class.is-invalid]="showErrorMessages"
-      [class.tree-input]="!model.readOnly"
-      [id]="id"
-      [name]="model.name"
-      [placeholder]="model.placeholder"
-      [readonly]="true"
-      [disabled]="model.readOnly"
-      [type]="model.inputType"
-      [value]="currentValue?.display"
-      (focus)="onFocus($event)"
-      (change)="onChange($event)"
-      (click)="openTree($event)"
-      (keydown)="$event.preventDefault()"
-      (keypress)="$event.preventDefault()"
-      (keyup)="$event.preventDefault()">
+           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.autoComplete]="model.autoComplete"
+           [attr.aria-label]="model.label | translate"
+           [class.is-invalid]="showErrorMessages"
+           [class.tree-input]="!model.readOnly"
+           [id]="id"
+           [name]="model.name"
+           [placeholder]="model.placeholder"
+           [readonly]="true"
+           [disabled]="model.readOnly"
+           [type]="model.inputType"
+           [value]="currentValue?.display"
+           (focus)="onFocus($event)"
+           (change)="onChange($event)"
+           (click)="openTree($event)"
+           (keydown)="$event.preventDefault()"
+           (keypress)="$event.preventDefault()"
+           (keyup)="$event.preventDefault()">
   </div>
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss

@@ -31,3 +31,9 @@
 .tree-input[readonly]{
   background-color: #fff;
 }
+
+.authority-icons {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%)
+}

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html

@@ -30,7 +30,7 @@
             <button id="resultdropdown" type="button"
               ngbDropdownToggle
               class="btn btn-outline-secondary dropdown-toggle-split"
-              data-toggle="dropdown" aria-haspopup="true"
+              data-bs-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false"
               [hidden]="selectAllLoading">
               <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.toggle-dropdown' | translate) }}</span>

src/app/shared/form/form.component.ts

@@ -232,7 +232,7 @@ export class FormComponent implements OnDestroy, OnInit {
               }
 
               if (field) {
-                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
+                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel, fieldIndex);
                 this.formService.addErrorToField(field, model, error.message);
                 this.changeDetectorRef.detectChanges();
 
@@ -255,7 +255,7 @@ export class FormComponent implements OnDestroy, OnInit {
               }
 
               if (field) {
-                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
+                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel, fieldIndex);
                 this.formService.removeErrorFromField(field, model, error.message);
               }
             });

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts

@@ -21,6 +21,7 @@ import { VocabularyEntry } from '../../../core/submission/vocabularies/models/vo
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
+import { createSuccessfulRemoteDataObject$ } from '../../remote-data.utils';
 import { createTestComponent } from '../../testing/utils.test';
 import { FormFieldMetadataValueObject } from '../builder/models/form-field-metadata-value.model';
 import { VocabularyTreeviewComponent } from './vocabulary-treeview.component';
@@ -63,6 +64,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
     searchTopEntries: jasmine.createSpy('searchTopEntries'),
     getEntryDetailChildren: jasmine.createSpy('getEntryDetailChildren'),
     clearSearchTopRequests: jasmine.createSpy('clearSearchTopRequests'),
+    findVocabularyById: createSuccessfulRemoteDataObject$({ preloadLevel: 2 }),
   });
 
   beforeEach(waitForAsync(() => {

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -22,8 +22,17 @@ import {
   Observable,
   Subscription,
 } from 'rxjs';
+import {
+  map,
+  switchMap,
+  tap,
+} from 'rxjs/operators';
+import { VocabularyService } from 'src/app/core/submission/vocabularies/vocabulary.service';
 
+import { RemoteData } from '../../../core/data/remote-data';
+import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { Vocabulary } from '../../../core/submission/vocabularies/models/vocabulary.model';
 import { VocabularyEntry } from '../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
@@ -166,6 +175,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   constructor(
     private vocabularyTreeviewService: VocabularyTreeviewService,
+    protected vocabularyService: VocabularyService,
   ) {
     this.treeFlattener = new VocabularyTreeFlattener(this.transformer, this.getLevel,
       this.isExpandable, this.getChildren);
@@ -207,12 +217,20 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
     );
     this.nodeMap.set(entryId, newNode);
 
-    if ((((level + 1) < this.preloadLevel) && newNode.childrenLoaded)
+    if ((((level + 1) < this.preloadLevel))
       || (newNode.isSearchNode && newNode.childrenLoaded)
       || newNode.isInInitValueHierarchy) {
-      if (!newNode.isSearchNode) {
+
+      if (newNode.item.id === LOAD_MORE || newNode.item.id === LOAD_MORE_ROOT) {
+        // When a 'LOAD_MORE' node is encountered, the parent already has a lot of expanded children
+        // so this is a good point to stop expanding.
+        return newNode;
+      }
+
+      if (!newNode.childrenLoaded) {
         this.loadChildren(newNode);
       }
+
       this.treeControl.expand(newNode);
     }
     return newNode;
@@ -253,15 +271,31 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   ngOnInit(): void {
     this.subs.push(
-      this.vocabularyTreeviewService.getData().subscribe((data) => {
+      this.vocabularyService.findVocabularyById(this.vocabularyOptions.name).pipe(
+        // Retrieve the configured preloadLevel from REST
+        getFirstCompletedRemoteData(),
+        map((vocabularyRD: RemoteData<Vocabulary>) => {
+          if (vocabularyRD.hasSucceeded &&
+            hasValue(vocabularyRD.payload.preloadLevel) &&
+            vocabularyRD.payload.preloadLevel > 1) {
+            return vocabularyRD.payload.preloadLevel;
+          } else {
+            // Set preload level to 1 in case request fails
+            return 1;
+          }
+        }),
+        tap(preloadLevel => this.preloadLevel = preloadLevel),
+        tap(() => {
+          const entryId: string = (this.selectedItems?.length > 0) ? this.getEntryId(this.selectedItems[0]) : null;
+          this.vocabularyTreeviewService.initialize(this.vocabularyOptions, new PageInfo(), this.getSelectedEntryIds(), entryId);
+        }),
+        switchMap(() => this.vocabularyTreeviewService.getData()),
+      ).subscribe((data) => {
         this.dataSource.data = data;
       }),
     );
 
     this.loading = this.vocabularyTreeviewService.isLoading();
-
-    const entryId: string = (this.selectedItems?.length > 0) ? this.getEntryId(this.selectedItems[0]) : null;
-    this.vocabularyTreeviewService.initialize(this.vocabularyOptions, new PageInfo(), this.getSelectedEntryIds(), entryId);
   }
 
   /**

src/app/shared/geospatial-map/geospatial-map.component.ts

@@ -37,6 +37,8 @@ import { GeospatialMapDetail } from './models/geospatial-map-detail.model';
  * Component to draw points and polygons on a tiled map using leaflet.js
  * This component can be used by item page fields, the browse-by geospatial component, and the geospatial search
  * view mode to render related places of an item (e.g. metadata on a page), or items *as* places (e.g. browse / search)
+ *
+ * This component should be used in a `@defer` block to keep geospatial mapping libraries out of the main bundle!
  */
 export class GeospatialMapComponent implements AfterViewInit, OnInit, OnDestroy {
 
@@ -134,6 +136,7 @@ export class GeospatialMapComponent implements AfterViewInit, OnInit, OnDestroy
   private initMap(): void {
     // 'Import' leaflet packages in a browser-mode-only way to avoid issues with SSR
     const L = require('leaflet'); require('leaflet.markercluster'); require('leaflet-providers');
+
     // Set better default icons
     L.Icon.Default.mergeOptions({
       iconRetinaUrl: 'assets/images/marker-icon-2x.png',

src/app/shared/lang-switch/lang-switch.component.html

@@ -6,7 +6,7 @@
             aria-haspopup="menu"
             class="dropdown-toggle btn btn-link px-0"
             [title]="'nav.language' | translate"
-            (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
+            (click)="$event.preventDefault()" data-bs-toggle="dropdown" ngbDropdownToggle
             data-test="lang-switch"
             tabindex="0">
       <i class="fas fa-globe-asia fa-lg fa-fw"></i>

src/app/shared/notification-box/notification-box.component.html

@@ -7,8 +7,8 @@
     [title]="boxConfig.description | translate"
     >
     <div [ngStyle]="{'color': boxConfig.textColor}" class="d-flex flex-column justify-content-center align-items-center">
-      <div class="mb-3 font-weight-bold box-counter">{{ boxConfig.count ?? 0 }}</div>
-      <div class="font-weight-bold d-flex justify-content-center w-100">{{ boxConfig.title | translate }}</div>
+      <div class="mb-3 fw-bold box-counter">{{ boxConfig.count ?? 0 }}</div>
+      <div class="fw-bold d-flex justify-content-center w-100">{{ boxConfig.title | translate }}</div>
     </div>
   </div>
 }

src/app/shared/notifications/notification/notification.component.html

@@ -10,7 +10,7 @@
   @if (notification.options.clickToClose) {
     <button
       (click)="remove()"
-      type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-dismiss="alert" aria-label="Close">
+      type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-bs-dismiss="alert" aria-label="Close">
     </button>
   }
 

src/app/shared/object-collection/object-collection.component.html

@@ -1,6 +1,8 @@
 @if ((currentMode$ | async) === viewModeEnum.GeospatialMap) {
-  <ds-object-geospatial-map [objects]="objects">
-  </ds-object-geospatial-map>
+  @defer {
+    <ds-object-geospatial-map [objects]="objects">
+    </ds-object-geospatial-map>
+  }
 }
 
 @if ((currentMode$ | async) === viewModeEnum.ListElement || (currentMode$ | async) === viewModeEnum.GeospatialMap) {

src/app/shared/object-geospatial-map/object-geospatial-map.component.html

@@ -1,3 +1,5 @@
-@if (isPlatformBrowser(platformId)) {
-    <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
-}
+<!--
+  Note: ds-object-geospatial-map itself should be rendered in a @defer block, so we don't need one here.
+  https://angular.dev/guide/templates/defer#avoid-cascading-loads-with-nested-defer-blocks
+-->
+<ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>

src/app/shared/object-geospatial-map/object-geospatial-map.component.ts

@@ -1,7 +1,4 @@
-import {
-  isPlatformBrowser,
-  NgIf,
-} from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -35,13 +32,14 @@ import { parseGeoJsonFromMetadataValue } from '../utils/geospatial.functions';
   standalone: true,
   imports: [
     GeospatialMapComponent,
-    NgIf,
   ],
 })
 
 /**
  * This component is used with the GeospatialMap ViewMode in search or browse results, and
- * prepares geospatial data collection for display on the GeospatialMapComponent
+ * prepares geospatial data collection for display on the GeospatialMapComponent.
+ *
+ * This component should be used in a `@defer` block to keep geospatial mapping libraries out of the main bundle!
  */
 export class ObjectGeospatialMapComponent {
 

src/app/shared/object-list/object-list.component.html

@@ -16,7 +16,7 @@
   (prev)="goPrev()"
   (next)="goNext()">
   @if (objects?.hasSucceeded) {
-    <ul class="list-unstyled" [ngClass]="{'ml-4': selectable}" data-test="objects">
+    <ul class="list-unstyled" [ngClass]="{'ms-4': selectable}" data-test="objects">
       @for (object of objects?.payload?.page; track object; let i = $index; let last = $last) {
         <li class="mt-4 mb-4 d-flex" [class.border-bottom]="hasBorder && !last" [attr.data-test]="'list-object' | dsBrowserOnly">
           @if (selectable) {

src/app/shared/resource-policies/entry/resource-policy-entry.component.html

@@ -1,11 +1,11 @@
 <td class="text-center">
-  <div class="custom-control custom-checkbox">
+  <div>
     <input type="checkbox"
-      class="custom-control-input"
+      class="form-check-input"
       [id]="entry.id"
       [ngModel]="entry.checked"
       (ngModelChange)="this.toggleCheckbox.emit($event);">
-    <label class="custom-control-label" [for]="entry.id">
+    <label class="form-check-label" [for]="entry.id">
       <span class="sr-only">{{(entry.checked ? 'resource-policies.table.headers.deselect' : 'resource-policies.table.headers.select') | translate}}</span>
     </label>
   </div>

src/app/shared/resource-policies/resource-policies.component.html

@@ -42,12 +42,12 @@
       @if ((getResourcePolicies() | async)?.length > 0) {
         <tr class="text-center">
           <th>
-            <div class="custom-control custom-checkbox">
+            <div>
               <input #selectAllBtn type="checkbox"
-                class="custom-control-input"
+                class="form-check-input"
                 [id]="'selectAll_' + resourceUUID"
                 (change)="selectAllCheckbox($event)">
-              <label class="custom-control-label" [for]="'selectAll_' + resourceUUID">
+              <label class="form-check-label" [for]="'selectAll_' + resourceUUID">
                 <span class="sr-only">{{(selectAllBtn.checked ? 'resource-policies.table.headers.deselect-all' : 'resource-policies.table.headers.select-all') | translate}}</span>
               </label>
             </div>

src/app/shared/search/advanced-search/advanced-search.component.html

@@ -6,7 +6,7 @@
   </label>
   <select [(ngModel)]="currentFilter" (keyup.enter)="applyFilter()"
     (ngModelChange)="currentOperator = advancedFilterMap.get(currentFilter).operators[0].operator"
-    class="form-control mb-2" id="advanced-search-filters">
+    class="form-select mb-2" id="advanced-search-filters">
     @for (advancedFilter of (advancedFilters$ | async); track advancedFilter.filter) {
       <option [value]="advancedFilter.filter">
         {{ 'search.filters.filter.' + advancedFilter.filter + '.head' | translate }}
@@ -17,7 +17,7 @@
     {{ 'search.sidebar.advanced-search.operators' | translate }}
   </label>
   <select [(ngModel)]="currentOperator" (keyup.enter)="applyFilter()"
-    class="form-control mb-2" id="advanced-search-operators">
+    class="form-select mb-2" id="advanced-search-operators">
     @for (operator of advancedFilterMap.get(currentFilter)?.operators; track operator) {
       <option [value]="operator.operator">
         {{ 'search.filters.operator.' + operator.operator + '.text' | translate }}

src/app/shared/search/search-filters/search-filter/search-filter.component.html

@@ -9,7 +9,7 @@
       role="button"
       tabindex="0"
       >
-      <span class="h4 d-inline-block text-left mt-auto mb-auto dark:text-white text-dark">
+      <span class="h4 d-inline-block text-start mt-auto mb-auto dark:text-white text-dark">
         {{'search.filters.filter.' + filter.name + '.head'| translate}}
       </span>
       <i class="filter-toggle flex-grow-1 fas p-auto"

src/app/shared/search/search-labels/search-label-range/search-label-range.component.html

@@ -6,7 +6,7 @@
     (click)="searchFilterService.minimizeAll()"
     class="badge bg-primary">
     <span class="d-flex">
-      <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
+      <span class="flex-grow-1 text-start">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
       <span class="ps-1" aria-hidden="true">×</span>
     </span>
   </a>
@@ -19,7 +19,7 @@
     (click)="searchFilterService.minimizeAll()"
     class="badge bg-primary">
     <span class="d-flex">
-      <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
+      <span class="flex-grow-1 text-start">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
       <span class="ps-1" aria-hidden="true">×</span>
     </span>
   </a>

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -4,7 +4,7 @@
    [queryParams]="(removeParameters$ | async)"
    (click)="searchFilterService.minimizeAll()">
   <span class="d-flex">
-    <span class="flex-grow-1 text-left">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>
+    <span class="flex-grow-1 text-start">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>
     <span class="ps-1" aria-hidden="true">×</span>
   </span>
 </a>

src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html

@@ -16,7 +16,7 @@
     <div>
       @for (subscriptionType of subscriptionForm?.controls | keyvalue; track subscriptionType) {
         <fieldset formGroupName="{{subscriptionType.key}}" class="mb-3 row">
-          <legend class="col-md-4 col-form-label float-md-left pt-0">
+          <legend class="col-md-4 col-form-label float-md-start pt-0">
             {{ 'subscriptions.modal.new-subscription-form.type.' + subscriptionType.key | translate }}:
           </legend>
           <div class="col-md-8">

src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html

@@ -23,7 +23,7 @@
     <span><i class="fas fa-cloud-upload"
     aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
     <label class="btn btn-link m-0 p-0 ms-1">
-      <input class="form-control-file d-none" type="file" name="file-upload"
+      <input class="form-control d-none" type="file" name="file-upload"
         id="file-upload"
         (change)="handleFileInput($event)">
       {{'uploader.browse' | translate}}

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -1,4 +1,4 @@
-<div class="btn-group" data-toggle="buttons">
+<div class="btn-group" data-bs-toggle="buttons">
   @if (isToShow(viewModeEnum.ListElement)) {
     <button
       [attr.aria-current]="currentMode === viewModeEnum.ListElement"

src/app/submission/form/footer/submission-form-footer.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Input,
@@ -6,7 +6,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import {
   Observable,
   of,
@@ -29,10 +29,10 @@ import { SubmissionService } from '../../submission.service';
   templateUrl: './submission-form-footer.component.html',
   standalone: true,
   imports: [
+    AsyncPipe,
     BrowserOnlyPipe,
     BtnDisabledDirective,
-    CommonModule,
-    TranslateModule,
+    TranslatePipe,
   ],
 })
 export class SubmissionFormFooterComponent implements OnChanges {

src/app/submission/sections/duplicates/section-duplicates.component.html

@@ -2,7 +2,7 @@
 Template for the detect duplicates submission section component
 @author Kim Shepherd
 -->
-<div class="text-sm-left" *ngVar="(this.getDuplicateData() | async) as data">
+<div class="text-sm-start" *ngVar="(this.getDuplicateData() | async) as data">
   @if (data?.potentialDuplicates.length === 0) {
     <div class="alert alert-success w-100">{{ 'submission.sections.duplicates.none' | translate }}</div>
   }

src/app/submission/sections/upload/file/section-upload-file.component.html

@@ -2,15 +2,15 @@
   <div class="row">
     <!-- Default switch -->
     <div class="col-md-2 d-flex justify-content-center align-items-center" >
-      <div class="custom-control custom-switch">
+      <div class="form-check form-switch">
         <input
           type="checkbox"
-          class="custom-control-input"
+          class="form-check-input"
           id="primaryBitstream{{fileIndex}}"
           [disabled]="processingSaveStatus$ | async"
           [checked]="isPrimary"
           (change)="togglePrimaryBitstream($event)">
-        <label class="custom-control-label" for="primaryBitstream{{fileIndex}}">
+        <label class="form-check-label" for="primaryBitstream{{fileIndex}}">
           @if (!isPrimary) {
             <span class="sr-only">{{'submission.sections.upload.primary.make' | translate:{ fileName: fileName } }}</span>
           }

src/app/submission/sections/upload/section-upload.component.html

@@ -21,7 +21,7 @@
   }
   <div class="row">
     <div class="col-md-2">
-      <span class="text-left font-weight-bold">{{ 'bitstream.edit.form.primaryBitstream.label' | translate }}</span>
+      <span class="text-start fw-bold">{{ 'bitstream.edit.form.primaryBitstream.label' | translate }}</span>
     </div>
   </div>
   <div class="row">

src/app/thumbnail/thumbnail.component.html

@@ -1,30 +1,29 @@
 <div class="thumbnail" [class.limit-width]="limitWidth">
   @if (isLoading()) {
-  <div class="thumbnail-content outer">
-    <div class="inner">
-      <div class="centered">
-        <ds-loading [spinner]="true"></ds-loading>
+    <div class="thumbnail-content outer">
+      <div class="inner">
+        <div class="centered">
+          <ds-loading [spinner]="true"></ds-loading>
+        </div>
       </div>
     </div>
-  </div>
   }
   <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
   @if (src() !== null) {
-  <img
-    class="thumbnail-content img-fluid"
-    [ngClass]="{ 'd-none': isLoading ()}"
+    <img class="thumbnail-content img-fluid"
+         [class.d-none]="isLoading()"
          [src]="src() | dsSafeUrl"
          [alt]="alt | translate"
          (error)="errorHandler()"
-         (load)="successHandler()"
-  />
-  } @if (src() === null && isLoading() === false) {
-  <div class="thumbnail-content outer">
-    <div class="inner">
-      <div class="thumbnail-placeholder centered">
-        {{ placeholder | translate }}
+         (load)="successHandler()"/>
+  }
+  @if (src() === null && isLoading() === false) {
+    <div class="thumbnail-content outer">
+      <div class="inner">
+        <div class="thumbnail-placeholder centered">
+          {{ placeholder | translate }}
+        </div>
       </div>
     </div>
-  </div>
   }
 </div>

src/app/thumbnail/thumbnail.component.ts

@@ -1,7 +1,4 @@
-import {
-  CommonModule,
-  isPlatformBrowser,
-} from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import {
   Component,
   Inject,
@@ -12,7 +9,7 @@ import {
   SimpleChanges,
   WritableSignal,
 } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
@@ -40,10 +37,9 @@ import { SafeUrlPipe } from '../shared/utils/safe-url-pipe';
   templateUrl: './thumbnail.component.html',
   standalone: true,
   imports: [
-    CommonModule,
     SafeUrlPipe,
     ThemedLoadingComponent,
-    TranslateModule,
+    TranslatePipe,
   ],
 })
 export class ThumbnailComponent implements OnChanges {

src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-select-reviewer/advanced-workflow-action-select-reviewer.component.ts

@@ -1,6 +1,7 @@
 import {
-  CommonModule,
+  AsyncPipe,
   Location,
+  NgClass,
 } from '@angular/common';
 import {
   Component,
@@ -44,8 +45,9 @@ export const ADVANCED_WORKFLOW_ACTION_SELECT_REVIEWER = 'selectrevieweraction';
   templateUrl: './advanced-workflow-action-select-reviewer.component.html',
   styleUrls: ['./advanced-workflow-action-select-reviewer.component.scss'],
   imports: [
-    CommonModule,
+    AsyncPipe,
     ModifyItemOverviewComponent,
+    NgClass,
     ReviewersListComponent,
     TranslateModule,
   ],

src/app/workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts

@@ -1,5 +1,5 @@
 import {
-  CommonModule,
+  AsyncPipe,
   Location,
 } from '@angular/common';
 import { Component } from '@angular/core';
@@ -8,7 +8,7 @@ import {
   Router,
 } from '@angular/router';
 import {
-  TranslateModule,
+  TranslatePipe,
   TranslateService,
 } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -30,9 +30,9 @@ import { WorkflowItemActionPageDirective } from '../workflow-item-action-page.co
   templateUrl: '../workflow-item-action-page.component.html',
   standalone: true,
   imports: [
-    CommonModule,
+    AsyncPipe,
     ModifyItemOverviewComponent,
-    TranslateModule,
+    TranslatePipe,
     VarDirective,
   ],
 })

src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.ts

@@ -1,5 +1,5 @@
 import {
-  CommonModule,
+  AsyncPipe,
   Location,
 } from '@angular/common';
 import {
@@ -42,7 +42,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
   templateUrl: './workspaceitems-delete-page.component.html',
   styleUrls: ['./workspaceitems-delete-page.component.scss'],
   imports: [
-    CommonModule,
+    AsyncPipe,
     ModifyItemOverviewComponent,
     TranslateModule,
   ],

src/assets/i18n/ar.json5

@@ -459,6 +459,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "حذف \"{{name}}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "لا يوجد أشخاص إلكترونيين للعرض.",
 
@@ -651,7 +667,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "حذف المجموعة \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "هل أنت متأكد من أنك ترغب في حذف المجموعة \"{{ dsoName }}\"",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2407,6 +2424,22 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "فشل حذف مجموعة الدور '{{ role }}'",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "المسؤولون",
 

src/assets/i18n/bn.json5

@@ -500,6 +500,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "\"{{ name }}\" মুছে ফেলুন",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "কোন ই-পারসিওন প্রদর্শন করার জন্যে নেই।",
 
@@ -695,7 +711,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "গ্রুপ মুছে ফেলুন \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "আপনি কি গ্রুপ \"{{ dsoName }}\" মুছে ফেলতে চান তা নিশ্চিত করুন।",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2558,6 +2575,22 @@
   // TODO New key - Add a translation
   "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "প্রশাসক",
 

src/assets/i18n/ca.json5

@@ -459,6 +459,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "Eliminar \"{{ name }}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "No hi ha usuaris per mostrar.",
 
@@ -651,7 +667,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Eliminar grup \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "Esteu segur que voleu suprimir el grup \"{{ dsoName }}\"?",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2299,6 +2316,22 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "Error en esborrar el grup del rol '{{ role }}'",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Administradors",
 

src/assets/i18n/cs.json5

@@ -477,6 +477,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "Odstranit \"{{name}}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "Žádní uživatelé k zobrazení.",
 
@@ -671,7 +687,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Odstranit skupinu \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "Určitě chcete odstranit skupinu \"{{ dsoName }}\"",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2456,6 +2473,22 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "Nepodařilo se smazat skupinu pro roli '{{ role }}'",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Správci",
 

src/assets/i18n/de.json5

@@ -459,6 +459,18 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "\"{{name}}\" löschen",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Gruppe \"{{ dsoName }}\" löschen",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Sind Sie sicher, dass Sie die Gruppe \"{{ dsoName }}\" und alle damit verbundenen Richtlinien löschen möchten",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Abbrechen",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Löschen",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "Keine Personen dazu.",
 
@@ -651,8 +663,9 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Gruppe \"{{ dsoName }}\" löschen",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
-  "admin.access-control.groups.form.delete-group.modal.info": "Sind Sie sicher, dass Sie die Gruppe \"{{ dsoName }}\" löschen möchten",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
+  "admin.access-control.groups.form.delete-group.modal.info": "Sind Sie sicher, dass Sie die Gruppe \"{{ dsoName }}\" und alle damit verbundenen Richtlinien löschen möchten",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
   "admin.access-control.groups.form.delete-group.modal.cancel": "Abbrechen",
@@ -1366,7 +1379,7 @@
   "bitstream.edit.bitstream": "Bitstream: ",
 
   // "bitstream.edit.form.description.hint": "Optionally, provide a brief description of the file, for example \"<i>Main article</i>\" or \"<i>Experiment data readings</i>\".",
-  "bitstream.edit.form.description.hint": "Hier können Sie eine kurze Beschreibung der Datei angeben, zum Beispiel \"<i>Artikel</i>\" oder \"<i>Tabellenhanhang</i>\".",
+  "bitstream.edit.form.description.hint": "Hier können Sie eine kurze Beschreibung der Datei angeben, zum Beispiel \"<i>Artikel</i>\" oder \"<i>Tabellenanhang</i>\".",
 
   // "bitstream.edit.form.description.label": "Description",
   "bitstream.edit.form.description.label": "Beschreibung",
@@ -2298,6 +2311,18 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "Die Gruppe der Rolle '{{ role }}' konnte nicht gelöscht werden",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  "comcol-role.edit.delete.modal.header": "Gruppe \"{{ dsoName }}\" löschen",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  "comcol-role.edit.delete.modal.info": "Sind Sie sicher, dass Sie die Gruppe \"{{ dsoName }}\" und alle damit verbundenen Richtlinien löschen möchten",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  "comcol-role.edit.delete.modal.cancel": "Abbrechen",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  "comcol-role.edit.delete.modal.confirm": "Löschen",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Administrator:innen",
 
@@ -2469,7 +2494,7 @@
   "cookies.consent.content-modal.no-privacy-policy.text": "",
 
   // "cookies.consent.content-modal.title": "Information that we collect",
-  "cookies.consent.content-modal.title": "Information, die wir sammeln",
+  "cookies.consent.content-modal.title": "Informationen, die wir sammeln",
 
   // "cookies.consent.app.title.accessibility": "Accessibility Settings",
   // TODO New key - Add a translation

src/assets/i18n/el.json5

@@ -484,6 +484,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "Διαγραφή \"{{name}}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "Δεν υπάρχουν χρήστες για εμφάνιση.",
 
@@ -681,7 +697,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Διαγραφή ομάδας \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "Είστε βέβαιοι ότι θέλετε να διαγράψετε την ομάδα \"{{ dsoName }}\"",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2537,6 +2554,22 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "Απέτυχε η διαγραφή της ομάδας ρόλων \"{{ role }}\".",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Διαχειριστές",
 

src/assets/i18n/en.json5

@@ -305,6 +305,14 @@
 
   "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
 
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   "admin.access-control.epeople.no-items": "No EPeople to show.",
 
   "admin.access-control.epeople.form.create": "Create EPerson",
@@ -433,7 +441,7 @@
 
   "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
 
-  "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
 
   "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
 
@@ -1523,6 +1531,14 @@
 
   "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
 
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   "comcol-role.edit.community-admin.name": "Administrators",
 
   "comcol-role.edit.collection-admin.name": "Administrators",

src/assets/i18n/es.json5

@@ -459,6 +459,22 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "Eliminar \"{{ name }}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "No hay usuarios para mostrar.",
 
@@ -651,7 +667,8 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Eliminar grupo \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
   "admin.access-control.groups.form.delete-group.modal.info": "¿Está seguro de que desea eliminar el grupo \"{{ dsoName }}\"?",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2297,6 +2314,22 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "Error al borrar el grupo del rol '{{ role }}'",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.cancel": "Cancel",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  // TODO New key - Add a translation
+  "comcol-role.edit.delete.modal.confirm": "Delete",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Administradores",
 

src/assets/i18n/fi.json5

@@ -491,6 +491,18 @@
   // "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
   "admin.access-control.epeople.table.edit.buttons.remove": "Poista \"{{name}}\"",
 
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Poista ryhmä \"{{ dsoName }}\"",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Haluatko varmasti poistaa ryhmän \"{{ dsoName }}\" ja kaikki siihen liittyvät käytännöt?",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Peruuta",
+
+  // "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
+  "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Poista",
+
   // "admin.access-control.epeople.no-items": "No EPeople to show.",
   "admin.access-control.epeople.no-items": "Ei näytettäviä käyttäjiä.",
 
@@ -687,8 +699,9 @@
   // "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
   "admin.access-control.groups.form.delete-group.modal.header": "Poista ryhmä \"{{ dsoName }}\"",
 
-  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
-  "admin.access-control.groups.form.delete-group.modal.info": "Haluatko varmasti poistaa ryhmän \"{{ dsoName }}\"",
+  // "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  // TODO Source message changed - Revise the translation
+  "admin.access-control.groups.form.delete-group.modal.info": "Haluatko varmasti poistaa ryhmän \"{{ dsoName }}\" ja kaikki siihen liittyvät käytännöt?",
 
   // "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
   "admin.access-control.groups.form.delete-group.modal.cancel": "Peruuta",
@@ -2475,6 +2488,18 @@
   // "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
   "comcol-role.edit.delete.error.title": "'{{ role }}'-roolin ryhmän poisto epäonnistui",
 
+  // "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
+  "comcol-role.edit.delete.modal.header": "Poista ryhmä \"{{ dsoName }}\"",
+
+  // "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
+  "comcol-role.edit.delete.modal.info": "Haluatko varmasti poistaa ryhmän \"{{ dsoName }}\" ja kaikki siihen liittyvät käytännöt?",
+
+  // "comcol-role.edit.delete.modal.cancel": "Cancel",
+  "comcol-role.edit.delete.modal.cancel": "Peruuta",
+
+  // "comcol-role.edit.delete.modal.confirm": "Delete",
+  "comcol-role.edit.delete.modal.confirm": "Poista",
+
   // "comcol-role.edit.community-admin.name": "Administrators",
   "comcol-role.edit.community-admin.name": "Ylläpitäjät",