Minor code and style fixes (#5398)

* type fixes * import fixes * fix typos * fix warning for private props that init in ctor only * typing fixes * typing fixes * style cleanup * fix test template
2025-07-31 17:38:48 +00:00 · 2020-02-09 22:03:32 +00:00
parent 3459c98bd0
commit a0926a38d8
74 changed files with 171 additions and 71 deletions
--- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-card-view-array-item-theme($theme) {
    $foreground: map-get($theme, foreground);

--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-card-view-textitem-theme($theme) {
    $foreground: map-get($theme, foreground);
    $outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
--- a/lib/core/card-view/components/card-view/card-view.component.scss
+++ b/lib/core/card-view/components/card-view/card-view.component.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';

@mixin adf-card-view-theme($theme) {
    $primary: map-get($theme, primary);
--- a/lib/core/clipboard/clipboard.component.scss
+++ b/lib/core/clipboard/clipboard.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-clipboard-theme($theme) {
    $primary: map-get($theme, primary);
    $config: mat-typography-config();
--- a/lib/core/comments/comment-list.component.scss
+++ b/lib/core/comments/comment-list.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-task-list-comment-list-theme($theme) {
    $primary: map-get($theme, primary);
    $primaryColor: mat-color($primary, 100);
--- a/lib/core/comments/comments.component.scss
+++ b/lib/core/comments/comments.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-task-list-comment-theme($theme) {
    $foreground: map-get($theme, foreground);
    $header-border: 1px solid mat-color($foreground, divider);
@@ -16,9 +18,8 @@
    }

    .adf-comments-input-container {
-        padding: 0 15px;
        width: calc(100% - 30px);
-        padding-top: 8px;
+        padding: 8px 15px 0;
        border-bottom: $header-border;

        textarea {
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-datatable-theme($theme) {
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
--- a/lib/core/directives/check-allowable-operation.directive.spec.ts
+++ b/lib/core/directives/check-allowable-operation.directive.spec.ts
@@ -23,7 +23,8 @@ import { CoreModule } from '../core.module';
 import { TestBed } from '@angular/core/testing';

@Component({
-    selector: 'adf-text-subject'
+    selector: 'adf-text-subject',
+    template: ''
 })
 class TestComponent implements NodeAllowableOperationSubject {
    disabled: boolean = false;
--- a/lib/core/directives/node-restore.directive.ts
+++ b/lib/core/directives/node-restore.directive.ts
@@ -34,7 +34,7 @@ export class RestoreMessageModel {
    selector: '[adf-restore]'
 })
 export class NodeRestoreDirective {
-    private restoreProcessStatus;
+    private readonly restoreProcessStatus;

    /** Array of deleted nodes to restore. */
    @Input('adf-restore')
--- a/lib/core/form/components/form-renderer.component.scss
+++ b/lib/core/form/components/form-renderer.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-form-renderer-theme($theme) {

    $config: mat-typography-config();
--- a/lib/core/form/components/widgets/container/container.widget.scss
+++ b/lib/core/form/components/widgets/container/container.widget.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';

@mixin adf-form-container-widget-theme($theme) {
    $primary: map-get($theme, primary);
--- a/lib/core/form/components/widgets/core/form-outcome-event.model.ts
+++ b/lib/core/form/components/widgets/core/form-outcome-event.model.ts
@@ -21,7 +21,7 @@ import { FormOutcomeModel } from './form-outcome.model';

 export class FormOutcomeEvent {

-    private _outcome: FormOutcomeModel;
+    private readonly _outcome: FormOutcomeModel;
    private _defaultPrevented: boolean = false;

    get outcome(): FormOutcomeModel {
--- a/lib/core/form/components/widgets/core/form-widget.model.ts
+++ b/lib/core/form/components/widgets/core/form-widget.model.ts
@@ -30,7 +30,7 @@ export abstract class FormWidgetModel {
    readonly form: any;
    readonly json: any;

-    constructor(form: FormModel, json: any) {
+    protected constructor(form: FormModel, json: any) {
        this.form = form;
        this.json = json;

--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.model.ts
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.model.ts
@@ -38,7 +38,7 @@ export class DynamicTableModel extends FormWidgetModel {
    rows: DynamicTableRow[] = [];

    private _selectedRow: DynamicTableRow;
-    private _validators: CellValidator[] = [];
+    private readonly _validators: CellValidator[] = [];

    get selectedRow(): DynamicTableRow {
        return this._selectedRow;
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';
@import '../form';

@mixin adf-dynamic-table-theme($theme) {
@@ -62,9 +63,7 @@

                    &:focus {
                        outline-offset: -1px;
-                        outline-width: 1px;
-                        outline-color: rgb(68, 138, 255);
-                        outline-style: solid;
+                        outline: rgb(68, 138, 255) solid 1px;
                    }
                }
            }
--- a/lib/core/form/components/widgets/dynamic-table/editors/row.editor.css
+++ b/lib/core/form/components/widgets/dynamic-table/editors/row.editor.css
@@ -7,10 +7,7 @@
 }

 .row-editor__invalid .row-editor__validation-summary {
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding: 8px 16px;
    color: #d50000;
    visibility: visible;
 }
--- a/lib/core/form/components/widgets/form.scss
+++ b/lib/core/form/components/widgets/form.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-form-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss
+++ b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-hyperlink-widget-theme($theme) {
    $primary: map-get($theme, primary);

--- a/lib/core/form/components/widgets/index.ts
+++ b/lib/core/form/components/widgets/index.ts
@@ -46,6 +46,7 @@ import { TypeaheadWidgetComponent } from './typeahead/typeahead.widget';
 import { UploadWidgetComponent } from './upload/upload.widget';
 import { DateTimeWidgetComponent } from './date-time/date-time.widget';
 import { JsonWidgetComponent } from './json/json.widget';
+import { UploadFolderWidgetComponent } from './upload-folder/upload-folder.widget';

 // core
 export * from './widget.component';
@@ -76,6 +77,7 @@ export * from './error/error.component';
 export * from './document/document.widget';
 export * from './date-time/date-time.widget';
 export * from './json/json.widget';
+export * from './upload-folder/upload-folder.widget';

 // editors (dynamic table)
 export * from './dynamic-table/dynamic-table.widget.model';
@@ -117,7 +119,8 @@ export const WIDGET_DIRECTIVES: any[] = [
    DateTimeWidgetComponent,
    DateTimeEditorComponent,
    JsonWidgetComponent,
-    AmountEditorComponent
+    AmountEditorComponent,
+    UploadFolderWidgetComponent
 ];

 export const MASK_DIRECTIVE: any[] = [
--- a/lib/core/form/components/widgets/people/people.widget.scss
+++ b/lib/core/form/components/widgets/people/people.widget.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-form-people-widget-theme($theme) {
    $primary: map-get($theme, primary);
    $background: map-get($theme, background);
--- a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
@@ -147,7 +147,7 @@ export class UploadFolderWidgetComponent extends WidgetComponent implements OnIn
                file.contentBlob = blob;
                this.formService.formContentClicked.next(file);
            },
-            (error) => {
+            () => {
                this.logService.error('Unable to send event for file ' + file.name);
            }
        );
--- a/lib/core/form/form-base.module.ts
+++ b/lib/core/form/form-base.module.ts
@@ -37,10 +37,14 @@ import { WidgetComponent } from './components/widgets/widget.component';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { FormRendererComponent } from './components/form-renderer.component';
 import { EditJsonDialogModule } from '../dialogs/edit-json/edit-json.dialog.module';
+import { A11yModule } from '@angular/cdk/a11y';
+import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
    imports: [
        CommonModule,
+        A11yModule,
+        FlexLayoutModule,
        DataTableModule,
        HttpClientModule,
        MaterialModule,
--- a/lib/core/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/info-drawer/info-drawer-layout.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-info-drawer-theme($theme) {
    $primary: map-get($theme, primary);
    $background: map-get($theme, background);
--- a/lib/core/layout/components/header/header.component.scss
+++ b/lib/core/layout/components/header/header.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin  adf-header-layout-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/layout/components/layout-container/layout-container.component.scss
+++ b/lib/core/layout/components/layout-container/layout-container.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-layout-container-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin  adf-sidebar-action-menu-theme($theme) {

    $primary: map-get($theme, primary);
--- a/lib/core/login/components/login-dialog-panel.component.scss
+++ b/lib/core/login/components/login-dialog-panel.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-login-dialog-panel-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/login/components/login-dialog.component.scss
+++ b/lib/core/login/components/login-dialog.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-login-dialog-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/login/components/login.component.scss
+++ b/lib/core/login/components/login.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-login-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -120,7 +120,7 @@ export class LoginComponent implements OnInit, OnDestroy {
    isError: boolean = false;
    errorMsg: string;
    actualLoginStep: any = LoginSteps.Landing;
-    LoginSteps: any = LoginSteps;
+    LoginSteps = LoginSteps;
    rememberMe: boolean = true;
    formError: { [id: string]: string };
    minLength: number = 2;
--- a/lib/core/login/models/login-submit.event.ts
+++ b/lib/core/login/models/login-submit.event.ts
@@ -17,7 +17,7 @@

 export class LoginSubmitEvent {

-    private _values: any;
+    private readonly _values: any;
    private _defaultPrevented: boolean = false;

    get values(): any {
--- a/lib/core/models/comment.model.ts
+++ b/lib/core/models/comment.model.ts
@@ -15,11 +15,13 @@
 * limitations under the License.
 */

+import { Person } from '@alfresco/js-api';
+
 export class CommentModel {
    id: number;
    message: string;
    created: Date;
-    createdBy: any;
+    createdBy: Person;
    isSelected: boolean;

    constructor(obj?: any) {
--- a/lib/core/pagination/pagination.component.scss
+++ b/lib/core/pagination/pagination.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-pagination-theme($theme) {
    $foreground: map-get($theme, foreground);

--- a/lib/core/pipes/user-initial.pipe.ts
+++ b/lib/core/pipes/user-initial.pipe.ts
@@ -19,6 +19,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { UserProcessModel } from '../models/user-process.model';
 import { EcmUserModel } from '../models/ecm-user.model';
+import { IdentityUserModel } from '../models/identity-user.model';

@Pipe({
    name: 'usernameInitials'
@@ -28,7 +29,7 @@ export class InitialUsernamePipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }

-    transform(user: UserProcessModel | EcmUserModel, className: string = '', delimiter: string = ''): SafeHtml {
+    transform(user: UserProcessModel | EcmUserModel | IdentityUserModel, className: string = '', delimiter: string = ''): SafeHtml {
        let safeHtml: SafeHtml = '';
        if (user) {
            const initialResult = this.getInitialUserName(user.firstName, user.lastName, delimiter);
--- a/lib/core/search-text/search-text-input.component.scss
+++ b/lib/core/search-text/search-text-input.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-search-text-input-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
--- a/lib/core/services/comment-content.service.ts
+++ b/lib/core/services/comment-content.service.ts
@@ -21,6 +21,7 @@ import { CommentModel } from '../models/comment.model';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { LogService } from '../services/log.service';
 import { map, catchError } from 'rxjs/operators';
+import { CommentEntry } from '@alfresco/js-api';

@Injectable({
    providedIn: 'root'
@@ -40,7 +41,7 @@ export class CommentContentService {
    addNodeComment(nodeId: string, message: string): Observable<CommentModel> {
        return from(this.apiService.getInstance().core.commentsApi.addComment(nodeId, {content: message}))
            .pipe(
-                map((response: any) => {
+                map((response: CommentEntry) => {
                    return new CommentModel({
                        id: response.entry.id,
                        message: response.entry.content,
@@ -60,7 +61,7 @@ export class CommentContentService {
    getNodeComments(nodeId: string): Observable<CommentModel[]> {
        return from(this.apiService.getInstance().core.commentsApi.getComments(nodeId))
            .pipe(
-                map((response: any) => {
+                map((response) => {
                    const comments: CommentModel[] = [];
                    response.list.entries.forEach((comment: any) => {
                        comments.push(new CommentModel({
--- a/lib/core/services/comment-process.service.ts
+++ b/lib/core/services/comment-process.service.ts
@@ -41,7 +41,7 @@ export class CommentProcessService {
    addTaskComment(taskId: string, message: string): Observable<CommentModel> {
        return from(this.apiService.getInstance().activiti.taskApi.addTaskComment({ message: message }, taskId))
            .pipe(
-                map((response: CommentModel) => {
+                map((response) => {
                    return new CommentModel({
                        id: response.id,
                        message: response.message,
@@ -61,9 +61,9 @@ export class CommentProcessService {
    getTaskComments(taskId: string): Observable<CommentModel[]> {
        return from(this.apiService.getInstance().activiti.taskApi.getTaskComments(taskId))
            .pipe(
-                map((response: any) => {
+                map((response) => {
                    const comments: CommentModel[] = [];
-                    response.data.forEach((comment: CommentModel) => {
+                    response.data.forEach((comment) => {
                        const user = new UserProcessModel(comment.createdBy);
                        comments.push(new CommentModel({
                            id: comment.id,
@@ -86,9 +86,9 @@ export class CommentProcessService {
    getProcessInstanceComments(processInstanceId: string): Observable<CommentModel[]> {
        return from(this.apiService.getInstance().activiti.commentsApi.getProcessInstanceComments(processInstanceId))
            .pipe(
-                map((response: any) => {
+                map((response) => {
                    const comments: CommentModel[] = [];
-                    response.data.forEach((comment: CommentModel) => {
+                    response.data.forEach((comment) => {
                        const user = new UserProcessModel(comment.createdBy);
                        comments.push(new CommentModel({
                            id: comment.id,
@@ -113,7 +113,7 @@ export class CommentProcessService {
        return from(
            this.apiService.getInstance().activiti.commentsApi.addProcessInstanceComment({ message: message }, processInstanceId)
        ).pipe(
-            map((response: CommentModel) => {
+            map((response) => {
                return new CommentModel({
                    id: response.id,
                    message: response.message,
--- a/lib/core/services/download.service.ts
+++ b/lib/core/services/download.service.ts
@@ -21,7 +21,7 @@ import { Injectable } from '@angular/core';
    providedIn: 'root'
 })
 export class DownloadService {
-    private saveData: Function;
+    private readonly saveData: Function;

    constructor() {
        this.saveData = (function() {
--- a/lib/core/services/storage.service.ts
+++ b/lib/core/services/storage.service.ts
@@ -23,7 +23,7 @@ import { Injectable } from '@angular/core';
 export class StorageService {

    private memoryStore: { [key: string]: any } = {};
-    private useLocalStorage: boolean = false;
+    private readonly useLocalStorage: boolean = false;
    private _prefix: string = '';

    get prefix() {
--- a/lib/core/styles/_default-class.scss
+++ b/lib/core/styles/_default-class.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-default-class-theme($theme) {

    .adf-hide-small {
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';
@import 'variables';

@mixin adf-no-select {
--- a/lib/core/styles/_theme-colors.scss
+++ b/lib/core/styles/_theme-colors.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-colors-theme($theme) {

    $primary: map-get($theme, primary);
--- a/lib/core/styles/snackbar.scss
+++ b/lib/core/styles/snackbar.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-snackbar-theme($theme) {
    $warn: map-get($theme, warn);
    $accent: map-get($theme, accent);
--- a/lib/core/templates/empty-content/empty-content.component.scss
+++ b/lib/core/templates/empty-content/empty-content.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-empty-content-theme($theme) {

    $config: mat-typography-config();
--- a/lib/core/templates/error-content/error-content.component.scss
+++ b/lib/core/templates/error-content/error-content.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-error-content-theme($theme) {

    $primary: map-get($theme, primary);
--- a/lib/core/toolbar/toolbar.component.scss
+++ b/lib/core/toolbar/toolbar.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-toolbar-theme($theme) {
    $foreground: map-get($theme, foreground);
    $adf-toolbar-height: 48px !default;
--- a/lib/core/toolbar/toolbar.component.ts
+++ b/lib/core/toolbar/toolbar.component.ts
@@ -16,6 +16,7 @@
 */

 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';

@Component({
    selector: 'adf-toolbar',
@@ -33,6 +34,6 @@ export class ToolbarComponent {

    /** Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. */
    @Input()
-    color: string;
+    color: ThemePalette;

 }
--- a/lib/core/userinfo/components/user-info.component.scss
+++ b/lib/core/userinfo/components/user-info.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-userinfo-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
--- a/lib/core/userinfo/components/user-info.component.ts
+++ b/lib/core/userinfo/components/user-info.component.ts
@@ -24,7 +24,7 @@ import { BpmUserService } from '../../services/bpm-user.service';
 import { EcmUserService } from '../../services/ecm-user.service';
 import { IdentityUserService } from '../../services/identity-user.service';
 import { of, Observable } from 'rxjs';
-import { MatMenuTrigger } from '@angular/material';
+import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material';

@Component({
    selector: 'adf-userinfo',
@@ -46,11 +46,11 @@ export class UserInfoComponent implements OnInit {

    /** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
    @Input()
-    menuPositionX: string = 'after';
+    menuPositionX: MenuPositionX = 'after';

    /** Custom choice for opening the menu at the bottom. Can be `above` or `below`. */
    @Input()
-    menuPositionY: string = 'below';
+    menuPositionY: MenuPositionY = 'below';

    /** Shows/hides the username next to the user info button. */
    @Input()
--- a/lib/core/viewer/components/imgViewer.component.scss
+++ b/lib/core/viewer/components/imgViewer.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-image-viewer-theme($theme) {
    $background: map-get($theme, background);
    $viewer-image-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
--- a/lib/core/viewer/components/pdfViewer-password-dialog.scss
+++ b/lib/core/viewer/components/pdfViewer-password-dialog.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
 .adf-fill-remaining-space {
    flex: 1 1 auto;
 }
--- a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
+++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-pdf-thumbnails-theme($theme) {
    $background: map-get($theme, background);

--- a/lib/core/viewer/components/pdfViewer.component.scss
+++ b/lib/core/viewer/components/pdfViewer.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-pdf-viewer-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
@@ -47,12 +49,12 @@

        &__container {
            display: flex;
- height: 100%;
+            height: 100%;
        }

        &__content {
            flex: 1 1 auto;
- position: relative;
+            position: relative;
        }

        .adf-loader-item {
--- a/lib/core/viewer/components/pdfViewerHost.component.scss
+++ b/lib/core/viewer/components/pdfViewerHost.component.scss
@@ -399,11 +399,11 @@
            position: absolute;
            white-space: pre;
            cursor: text;
-            -webkit-transform-origin: 0% 0%;
-            -moz-transform-origin: 0% 0%;
-            -o-transform-origin: 0% 0%;
-            -ms-transform-origin: 0% 0%;
-            transform-origin: 0% 0%;
+            -webkit-transform-origin: 0 0;
+            -moz-transform-origin: 0 0;
+            -o-transform-origin: 0 0;
+            -ms-transform-origin: 0 0;
+            transform-origin: 0 0;
        }

        .adf-highlight {
--- a/lib/core/viewer/components/txtViewer.component.scss
+++ b/lib/core/viewer/components/txtViewer.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-text-viewer-theme($theme) {
    $background: map-get($theme, background);

--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
@mixin adf-viewer-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);