Merge remote-tracking branch 'origin/main' into w2p-96252_Reduce-main-bundle-size-part1

README.md

@@ -351,7 +351,7 @@ Documentation
 
 Official DSpace documentation is available in the DSpace wiki at https://wiki.lyrasis.org/display/DSDOC7x/
 
-Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of htis codebase.
+Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of this codebase.
 
 ### Building code documentation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "7.4.0",
+  "version": "7.5.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts

@@ -6,7 +6,7 @@ import { ScriptDataService } from '../../core/data/processes/script-data.service
 import { AdminSidebarComponent } from './admin-sidebar.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { AuthService } from '../../core/auth/auth.service';

src/app/admin/admin-sidebar/admin-sidebar.component.ts

@@ -5,7 +5,7 @@ import { AuthService } from '../../core/auth/auth.service';
 import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { ActivatedRoute } from '@angular/router';
@@ -69,7 +69,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
+    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { of as observableOf } from 'rxjs';
 import { Component } from '@angular/core';

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts

@@ -2,7 +2,7 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { bgColor } from '../../../shared/animations/bgColor';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
@@ -65,7 +65,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)

src/app/app.component.spec.ts

@@ -18,7 +18,7 @@ import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.ser
 import { AuthServiceMock } from './shared/mocks/auth.service.mock';
 import { AuthService } from './core/auth/auth.service';
 import { MenuService } from './shared/menu/menu.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
 import { MenuServiceStub } from './shared/testing/menu-service.stub';
 import { HostWindowService } from './shared/host-window.service';

src/app/app.component.ts

@@ -25,7 +25,7 @@ import { HostWindowState } from './shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
 import { isAuthenticationBlocking } from './core/auth/selectors';
 import { AuthService } from './core/auth/auth.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
 import { ThemeService } from './shared/theme-support/theme.service';
@@ -110,18 +110,8 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   private storeCSSVariables() {
-    this.cssService.addCSSVariable('xlMin', '1200px');
-    this.cssService.addCSSVariable('mdMin', '768px');
-    this.cssService.addCSSVariable('lgMin', '576px');
-    this.cssService.addCSSVariable('smMin', '0');
-    this.cssService.addCSSVariable('adminSidebarActiveBg', '#0f1b28');
-    this.cssService.addCSSVariable('sidebarItemsWidth', '250px');
-    this.cssService.addCSSVariable('collapsedSidebarWidth', '53.234px');
-    this.cssService.addCSSVariable('totalSidebarWidth', '303.234px');
-    // const vars = variables.locals || {};
-    // Object.keys(vars).forEach((name: string) => {
-    //   this.cssService.addCSSVariable(name, vars[name]);
-    // })
+    this.cssService.clearCSSVariables();
+    this.cssService.addCSSVariables(this.cssService.getCSSVariablesFromStylesheets(this.document));
   }
 
   ngAfterViewInit() {

src/app/app.reducer.ts

@@ -35,7 +35,7 @@ import {
   ObjectSelectionListState,
   objectSelectionReducer
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
+import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';
 
 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
 import {

src/app/core/core.module.ts

@@ -23,7 +23,6 @@ import { NotificationsService } from '../shared/notifications/notifications.serv
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { UploaderService } from '../shared/uploader/uploader.service';
 import { SectionFormOperationsService } from '../submission/sections/form/section-form-operations.service';
@@ -257,7 +256,6 @@ const PROVIDERS = [
   DefaultChangeAnalyzer,
   ArrayMoveChangeAnalyzer,
   ObjectSelectService,
-  CSSVariableService,
   MenuService,
   ObjectUpdatesService,
   SearchService,

src/app/core/data/base/data-service.decorator.spec.ts

@@ -10,6 +10,7 @@ import { ResourceType } from '../../shared/resource-type';
 import { BaseDataService } from './base-data.service';
 import { HALDataService } from './hal-data-service.interface';
 import { dataService, getDataServiceFor } from './data-service.decorator';
+import { v4 as uuidv4 } from 'uuid';
 
 class TestService extends BaseDataService<any> {
 }
@@ -28,7 +29,7 @@ let testType;
 
 describe('@dataService/getDataServiceFor', () => {
   beforeEach(() => {
-    testType = new ResourceType('testType-' + new Date().getTime());
+    testType = new ResourceType(`testType-${uuidv4()}`);
   });
 
   it('should register a resourcetype for a dataservice', () => {

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -6,8 +6,7 @@
                         <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                         </ds-listable-object-component-loader>
                 </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-left ng-tns-c290-40">Load
-                        more...</button>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-left ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
         </div>
         <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
         <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">

src/app/root/root.component.spec.ts

@@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { RouterMock } from '../shared/mocks/router.mock';
 import { MockActivatedRoute } from '../shared/mocks/active-router.mock';
 import { MenuService } from '../shared/menu/menu.service';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../shared/testing/css-variable-service.stub';
 import { HostWindowService } from '../shared/host-window.service';
 import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';

src/app/root/root.component.ts

@@ -10,7 +10,7 @@ import { MetadataService } from '../core/metadata/metadata.service';
 import { HostWindowState } from '../shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from '../core/services/window.service';
 import { AuthService } from '../core/auth/auth.service';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { ThemeConfig } from '../../config/theme.model';
@@ -63,8 +63,8 @@ export class RootComponent implements OnInit {
   ngOnInit() {
     this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
 
-    this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
-    this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
+    this.collapsedSidebarWidth = this.cssService.getVariable('--ds-collapsed-sidebar-width');
+    this.totalSidebarWidth = this.cssService.getVariable('--ds-total-sidebar-width');
 
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
     this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])

src/app/shared/host-window.service.ts

@@ -7,7 +7,7 @@ import { createSelector, select, Store } from '@ngrx/store';
 
 import { hasValue } from './empty.util';
 import { AppState } from '../app.reducer';
-import { CSSVariableService } from './sass-helper/sass-helper.service';
+import { CSSVariableService } from './sass-helper/css-variable.service';
 
 export enum WidthCategory {
   XS,
@@ -31,10 +31,10 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-      this.breakPoints.XL_MIN = parseInt(variables.xlMin, 10);
-      this.breakPoints.LG_MIN = parseInt(variables.lgMin, 10);
-      this.breakPoints.MD_MIN = parseInt(variables.mdMin, 10);
-      this.breakPoints.SM_MIN = parseInt(variables.smMin, 10);
+      this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
+      this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
+      this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
+      this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
     });
   }
 

src/app/shared/key-value-pair.model.ts

@@ -0,0 +1,4 @@
+export interface KeyValuePair<K, V> {
+  key: K;
+  value: V;
+}

src/app/shared/sass-helper/css-variable.actions.ts

@@ -1,5 +1,7 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../ngrx/type';
+import { KeyValuePair } from '../key-value-pair.model';
 
 /**
  * For each action type in an action group, make a simple
@@ -11,6 +13,8 @@ import { type } from '../ngrx/type';
  */
 export const CSSVariableActionTypes = {
   ADD: type('dspace/css-variables/ADD'),
+  ADD_ALL: type('dspace/css-variables/ADD_ALL'),
+  CLEAR: type('dspace/css-variables/CLEAR'),
 };
 
 export class AddCSSVariableAction implements Action {
@@ -24,5 +28,17 @@ export class AddCSSVariableAction implements Action {
     this.payload = {name, value};
   }
 }
+export class AddAllCSSVariablesAction implements Action {
+  type = CSSVariableActionTypes.ADD_ALL;
+  payload: KeyValuePair<string, string>[];
 
-export type CSSVariableAction = AddCSSVariableAction;
+  constructor(variables: KeyValuePair<string, string>[]) {
+    this.payload = variables;
+  }
+}
+
+export class ClearCSSVariablesAction implements Action {
+  type = CSSVariableActionTypes.CLEAR;
+}
+
+export type CSSVariableAction = AddCSSVariableAction | AddAllCSSVariablesAction | ClearCSSVariablesAction;

src/app/shared/sass-helper/css-variable.reducer.ts

@@ -0,0 +1,30 @@
+import { CSSVariableAction, CSSVariableActionTypes } from './css-variable.actions';
+import { KeyValuePair } from '../key-value-pair.model';
+
+export interface CSSVariablesState {
+  [name: string]: string;
+}
+
+const initialState: CSSVariablesState = Object.create({});
+
+/**
+ * Reducer that handles the state of CSS variables in the store
+ * @param state The current state of the store
+ * @param action The action to apply onto the current state of the store
+ */
+export function cssVariablesReducer(state = initialState, action: CSSVariableAction): CSSVariablesState {
+  switch (action.type) {
+    case CSSVariableActionTypes.ADD: {
+      const variable = action.payload;
+      return Object.assign({}, state, { [variable.name]: variable.value });
+    } case CSSVariableActionTypes.ADD_ALL: {
+      const variables = action.payload;
+      return Object.assign({}, state, ...variables.map(({ key, value }: KeyValuePair<string, string>) => {return {[key]: value};}));
+    } case CSSVariableActionTypes.CLEAR: {
+      return initialState;
+    }
+    default: {
+      return state;
+    }
+  }
+}

src/app/shared/sass-helper/css-variable.service.spec.ts

@@ -0,0 +1,78 @@
+import { TestBed } from '@angular/core/testing';
+import { CSSVariableService } from './css-variable.service';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { buildPaginatedList } from '../../core/data/paginated-list.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { KeyValuePair } from '../key-value-pair.model';
+
+describe('CSSVariableService', () => {
+  let store: MockStore;
+
+  let service: CSSVariableService;
+  let initialState;
+  const varKey1 = '--test-1';
+  const varValue1 = 'test-value-1';
+  const varKey2 = '--test-2';
+  const varValue2 = 'test-value-2';
+  const varKey3 = '--test-3';
+  const varValue3 = 'test-value-3';
+  const queryInAll = 'test';
+  const queryFor3 = '3';
+
+  function init() {
+    initialState = {
+      ['cssVariables']: {
+        [varKey1]: varValue1,
+        [varKey2]: varValue2,
+        [varKey3]: varValue3,
+      }
+    };
+  }
+
+  beforeEach(() => {
+    init();
+    TestBed.configureTestingModule({
+      providers: [
+        CSSVariableService,
+        provideMockStore({ initialState }),
+      ],
+    });
+    service = TestBed.inject(CSSVariableService as any);
+    store = TestBed.inject(MockStore as any);
+  });
+
+  it('should create', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('searchVariable', () => {
+    it('should return the right keys and variables in a paginated list for query that returns all 3 results', () => {
+      const currentPage = 1;
+      const pageSize = 5;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 1, totalElements: 3 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey1, value: varValue1 }, { key: varKey2, value: varValue2 }, { key: varKey3, value: varValue3 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryInAll, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+
+    it('should return the right keys and variables in a paginated list for query that returns only the 3rd results', () => {
+      const currentPage = 1;
+      const pageSize = 5;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 1, totalElements: 1 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey3, value: varValue3 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryFor3, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+
+    it('should return the right keys and variables in a paginated list that\'s not longer than the page size', () => {
+      const currentPage = 1;
+      const pageSize = 2;
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalPages: 2, totalElements: 3 });
+      const page: KeyValuePair<string, string>[] = [{ key: varKey1, value: varValue1 }, { key: varKey2, value: varValue2 }];
+      const result = buildPaginatedList(pageInfo, page);
+      getTestScheduler().expectObservable(service.searchVariable(queryInAll, { currentPage, pageSize } as any)).toBe('a', { a: result });
+    });
+  });
+
+});

src/app/shared/sass-helper/css-variable.service.ts

@@ -0,0 +1,161 @@
+import { Injectable } from '@angular/core';
+import { AppState, keySelector } from '../../app.reducer';
+import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
+import { AddAllCSSVariablesAction, AddCSSVariableAction, ClearCSSVariablesAction } from './css-variable.actions';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { Observable } from 'rxjs';
+import { hasValue, isNotEmpty } from '../empty.util';
+import { KeyValuePair } from '../key-value-pair.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { CSSVariablesState } from './css-variable.reducer';
+
+/**
+ * This service deals with adding and retrieving CSS variables to and from the store
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CSSVariableService {
+  isSameDomain = (styleSheet) => {
+    // Internal style blocks won't have an href value
+    if (!styleSheet.href) {
+      return true;
+    }
+
+    return styleSheet.href.indexOf(window.location.origin) === 0;
+  };
+
+  /*
+   Determine if the given rule is a CSSStyleRule
+   See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule#Type_constants
+  */
+  isStyleRule = (rule) => rule.type === 1;
+
+  constructor(
+    protected store: Store<AppState>) {
+  }
+
+  /**
+   * Adds a CSS variable to the store
+   * @param name The name/key of the CSS variable
+   * @param value The value of the CSS variable
+   */
+  addCSSVariable(name: string, value: string) {
+    this.store.dispatch(new AddCSSVariableAction(name, value));
+  }
+
+  /**
+   * Adds multiples CSS variables to the store
+   * @param variables The key-value pairs with the CSS variables to be added
+   */
+  addCSSVariables(variables: KeyValuePair<string, string>[]) {
+    this.store.dispatch(new AddAllCSSVariablesAction(variables));
+  }
+
+  /**
+   * Clears all CSS variables ƒrom the store
+   */
+  clearCSSVariables() {
+    this.store.dispatch(new ClearCSSVariablesAction());
+  }
+
+  /**
+   * Returns the value of a specific CSS key
+   * @param name The name/key of the CSS value
+   */
+  getVariable(name: string): Observable<string> {
+    return this.store.pipe(select(themeVariableByNameSelector(name)));
+  }
+
+  /**
+   * Returns the CSSVariablesState of the store containing all variables
+   */
+  getAllVariables(): Observable<CSSVariablesState> {
+    return this.store.pipe(select(themeVariablesSelector));
+  }
+
+  /**
+   * Method to find CSS variables by their partially supplying their key. Case sensitive. Returns a paginated list of KeyValuePairs with CSS variables that match the query.
+   * @param query The query to look for in the keys
+   * @param paginationOptions The pagination options for the requested page
+   */
+  searchVariable(query: string, paginationOptions: PaginationComponentOptions): Observable<PaginatedList<KeyValuePair<string, string>>> {
+    return this.store.pipe(select(themePaginatedVariablesByQuery(query, paginationOptions)));
+  }
+
+  /**
+   * Get all custom properties on a page
+   * @return array<KeyValuePair<string, string>>
+   * ex; [{key: "--color-accent", value: "#b9f500"}, {key: "--color-text", value: "#252525"}, ...]
+   */
+  getCSSVariablesFromStylesheets(document: Document): KeyValuePair<string, string>[] {
+    if (isNotEmpty(document.styleSheets)) {
+      // styleSheets is array-like, so we convert it to an array.
+      // Filter out any stylesheets not on this domain
+      return [...document.styleSheets]
+        .filter(this.isSameDomain)
+        .reduce(
+          (finalArr, sheet) =>
+            finalArr.concat(
+              // cssRules is array-like, so we convert it to an array
+              [...sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => {
+                const props = [...rule.style]
+                  .map((propName) => {
+                      return {
+                        key: propName.trim(),
+                        value: rule.style.getPropertyValue(propName).trim()
+                      } as KeyValuePair<string, string>;
+                    }
+                  )
+                  // Discard any props that don't start with "--". Custom props are required to.
+                  .filter(({ key }: KeyValuePair<string, string>) => key.indexOf('--') === 0);
+
+                return [...propValArr, ...props];
+              }, [])
+            ),
+          []
+        );
+    } else {
+      return [];
+    }
+  }
+}
+
+const themeVariablesSelector = (state: AppState) => state.cssVariables;
+
+const themeVariableByNameSelector = (name: string): MemoizedSelector<AppState, string> => {
+  return keySelector<string>(name, themeVariablesSelector);
+};
+
+// Split this up into two memoized selectors so the query search gets cached separately from the pagination,
+// since the entire list has to be retrieved every time anyway
+const themePaginatedVariablesByQuery = (query: string, pagination: PaginationComponentOptions): MemoizedSelector<AppState, PaginatedList<KeyValuePair<string, string>>> => {
+  return createSelector(themeVariablesByQuery(query), (pairs) => {
+    if (hasValue(pairs)) {
+      const { currentPage, pageSize } = pagination;
+      const startIndex = (currentPage - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      const pairsPage = pairs.slice(startIndex, endIndex);
+      const totalPages = Math.ceil(pairs.length / pageSize);
+      const pageInfo = new PageInfo({ currentPage, elementsPerPage: pageSize, totalElements: pairs.length, totalPages });
+      return buildPaginatedList(pageInfo, pairsPage);
+    } else {
+      return undefined;
+    }
+  });
+};
+
+const themeVariablesByQuery = (query: string): MemoizedSelector<AppState, KeyValuePair<string, string>[]> => {
+  return createSelector(themeVariablesSelector, (state) => {
+    if (hasValue(state)) {
+      return Object.keys(state)
+        .filter((key: string) => key.includes(query))
+        .map((key: string) => {
+          return { key, value: state[key] };
+        });
+    } else {
+      return undefined;
+    }
+  });
+};

src/app/shared/sass-helper/sass-helper.reducer.ts

@@ -1,20 +0,0 @@
-import { CSSVariableAction, CSSVariableActionTypes } from './sass-helper.actions';
-
-export interface CSSVariablesState {
-  [name: string]: string;
-}
-
-const initialState: CSSVariablesState = Object.create({});
-
-export function cssVariablesReducer(state = initialState, action: CSSVariableAction): CSSVariablesState {
-  switch (action.type) {
-    case CSSVariableActionTypes.ADD: {
-      const variable = action.payload;
-      const t =  Object.assign({}, state, { [variable.name]: variable.value });
-      return t;
-    }
-    default: {
-      return state;
-    }
-  }
-}

src/app/shared/sass-helper/sass-helper.service.ts

@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AppState, keySelector } from '../../app.reducer';
-import { MemoizedSelector, select, Store } from '@ngrx/store';
-import { AddCSSVariableAction } from './sass-helper.actions';
-
-@Injectable()
-export class CSSVariableService {
-  constructor(
-    protected store: Store<AppState>) {
-  }
-
-  addCSSVariable(name: string, value: string) {
-    this.store.dispatch(new AddCSSVariableAction(name, value));
-  }
-
-  getVariable(name: string) {
-    return this.store.pipe(select(themeVariableByNameSelector(name)));
-  }
-
-  getAllVariables() {
-    return this.store.pipe(select(themeVariablesSelector));
-  }
-
-}
-
-const themeVariablesSelector = (state: AppState) => state.cssVariables;
-
-const themeVariableByNameSelector = (name: string): MemoizedSelector<AppState, string> => {
-  return keySelector<string>(name, themeVariablesSelector);
-};

src/app/shared/testing/css-variable-service.stub.ts

@@ -1,10 +1,11 @@
 import { Observable, of as observableOf } from 'rxjs';
+import { KeyValuePair } from '../key-value-pair.model';
 
 const variables = {
-  smMin: '576px,',
-  mdMin: '768px,',
-  lgMin: '992px',
-  xlMin: '1200px',
+  '--bs-sm-min': '576px,',
+  '--bs-md-min': '768px,',
+  '--bs-lg-min': '992px',
+  '--bs-xl-min': '1200px',
 } as any;
 
 export class CSSVariableServiceStub {
@@ -19,4 +20,16 @@ export class CSSVariableServiceStub {
   addCSSVariable(name: string, value: string): void {
     /**/
   }
+
+  addCSSVariables(variablesToAdd: KeyValuePair<string, string>[]): void {
+    /**/
+  }
+
+  clearCSSVariables(): void {
+    /**/
+  }
+
+  getCSSVariablesFromStylesheets(document: Document): void {
+    /**/
+  }
 }

src/assets/i18n/pt-BR.json5

@@ -745,6 +745,33 @@
   // "admin.access-control.groups.form.return": "Back",
   "admin.access-control.groups.form.return": "Voltar",
 
+  //"admin.batch-import.breadcrumbs": "Import Batch",
+  "admin.batch-import.breadcrumbs": "Importar um Lote",
+
+  //"admin.batch-import.title": "Import Batch",
+  "admin.batch-import.title": "Importar um Lote",
+
+  //"admin.batch-import.page.header": "Import Batch",
+  "admin.batch-import.page.header": "Importar um Lote",
+
+  //"admin.batch-import.page.help": "Select the Collection to import into. Then, drop or browse to a Simple Archive Format (SAF) zip file that includes the Items to import",
+  "admin.batch-import.page.help": "Selecione a Coleção para o qual deseja importar. Arraste ou selecione um arquivo zip no formato Simple Archive Format (SAF) que inclua os Items para importar",
+
+  //"admin.batch-import.page.dropMsg": "Drop a batch ZIP to import",
+  "admin.batch-import.page.dropMsg": "Arraste e solte um lote ZIP para importar",
+
+  //"admin.batch-import.page.dropMsgReplace": "Drop to replace the batch ZIP to import",
+  "admin.batch-import.page.dropMsgReplace": "Arraste e solte um lote ZIP para substituir o lote para importar",
+
+  //"admin.batch-import.page.error.addFile": "Select Zip file first!",
+  "admin.batch-import.page.error.addFile": "Selecione um arquivo ZIP primeiro!",
+
+  //"admin.batch-import.page.validateOnly.hint": "When selected, the uploaded ZIP will be validated. You will receive a report of detected changes, but no changes will be saved.",
+  "admin.batch-import.page.validateOnly.hint": "Quando selecionado , o ZIP enviado sera validado. Você receberá um relatório das alterações detectadas, mas nenhuma alteração será salva.",
+
+  //"admin.batch-import.page.remove": "remove",
+  "admin.batch-import.page.remove": "remover",
+
   // "admin.search.breadcrumbs": "Administrative Search",
   "admin.search.breadcrumbs": "Pesquisa Administrativa",
 
@@ -820,6 +847,9 @@
   // "admin.metadata-import.page.button.proceed": "Proceed",
   "admin.metadata-import.page.button.proceed": "Continuar",
 
+  //"admin.metadata-import.page.button.select-collection": "Select Collection",
+  "admin.metadata-import.page.button.select-collection": "Selecione a  Coleção",
+
   // "admin.metadata-import.page.error.addFile": "Select file first!",
   "admin.metadata-import.page.error.addFile": "Selecione o arquivo primeiro!",
 
@@ -1176,7 +1206,7 @@
   "collection.edit.item-mapper.confirm": "Mapear itens selecionados",
 
   // "collection.edit.item-mapper.description": "This is the item mapper tool that allows collection administrators to map items from other collections into this collection. You can search for items from other collections and map them, or browse the list of currently mapped items.",
-  "collection.edit.item-mapper.description": "Esta é a ferramenta de mapeação de itens que permite administradores de coleções a mapear itens de outras coleções nesta. VoCẽ pode busca-los em outras coleções para mapeá-los, ou navegar na lista dos itens atualmente mapeados.",
+  "collection.edit.item-mapper.description": "Esta é a ferramenta de mapeação de itens que permite administradores de coleções a mapear itens de outras coleções nesta. Você pode buscar em outras coleções para mapear, ou navegar na lista dos itens atualmente mapeados.",
 
   // "collection.edit.item-mapper.head": "Item Mapper - Map Items from Other Collections",
   "collection.edit.item-mapper.head": "Mapeador de Itens - Mapear itens em Outras Coleções",
@@ -1912,6 +1942,12 @@
   // "dso-selector.export-metadata.dspaceobject.head": "Export metadata from",
   "dso-selector.export-metadata.dspaceobject.head": "Exportar metadados de",
 
+  //"dso-selector.export-batch.dspaceobject.head": "Export Batch (ZIP) from",
+  "dso-selector.export-batch.dspaceobject.head": "Exportar Lote (ZIP) de",
+
+  //"dso-selector.import-batch.dspaceobject.head": "Import batch from",
+  "dso-selector.import-batch.dspaceobject.head": "Importar lote de",
+
   // "dso-selector.no-results": "No {{ type }} found",
   "dso-selector.no-results": "Nenhum(a) {{ type }} encontrado(a)",
 
@@ -1954,6 +1990,18 @@
   // "confirmation-modal.export-metadata.confirm": "Export",
   "confirmation-modal.export-metadata.confirm": "Exportar",
 
+  //"confirmation-modal.export-batch.header": "Export batch (ZIP) for {{ dsoName }}",
+  "confirmation-modal.export-batch.header": "Exportar lote (ZIP) para {{ dsoName }}",
+
+  //"confirmation-modal.export-batch.info": "Are you sure you want to export batch (ZIP) for {{ dsoName }}",
+  "confirmation-modal.export-batch.info": "Você tem certeza que deseja exportar o lote (ZIP) para {{ dsoName }}",
+  
+  //"confirmation-modal.export-batch.cancel": "Cancel",
+  "confirmation-modal.export-batch.cancel": "Cancelar",
+
+  //"confirmation-modal.export-batch.confirm": "Export",
+  "confirmation-modal.export-batch.confirm": "Exportar",
+
   // "confirmation-modal.delete-eperson.header": "Delete EPerson \"{{ dsoName }}\"",
   "confirmation-modal.delete-eperson.header": "Apagar EPerson \"{{ dsoName }}\"",
 
@@ -3748,6 +3796,9 @@
 
   // "menu.section.import_batch": "Batch Import (ZIP)",
   "menu.section.import_batch": "Importação em Lote (ZIP)",
+  
+  // "menu.section.export_batch": "Batch Export (ZIP)",
+  "menu.section.export_batch": "Exportação em Lote (ZIP)",
 
   // "menu.section.import_metadata": "Metadata",
   "menu.section.import_metadata": "Metadados",

src/modules/app/server-init.service.ts

@@ -18,7 +18,6 @@ import { LocaleService } from '../../app/core/locale/locale.service';
 import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider';
 import { MetadataService } from '../../app/core/metadata/metadata.service';
 import { BreadcrumbsService } from '../../app/breadcrumbs/breadcrumbs.service';
-import { CSSVariableService } from '../../app/shared/sass-helper/sass-helper.service';
 import { ThemeService } from '../../app/shared/theme-support/theme.service';
 import { take } from 'rxjs/operators';
 
@@ -37,7 +36,6 @@ export class ServerInitService extends InitService {
     protected angulartics2DSpace: Angulartics2DSpace,
     protected metadata: MetadataService,
     protected breadcrumbsService: BreadcrumbsService,
-    protected cssService: CSSVariableService,
     protected themeService: ThemeService,
   ) {
     super(