[ACA-2122] automatic code formatting on commit (#890)

package.json

@@ -20,13 +20,15 @@
     "e2e:docker": "npm run start:docker && npm run e2e && npm run stop:docker",
     "spellcheck": "cspell 'src/**/*.ts' 'e2e/**/*.ts' 'projects/**/*.ts'",
     "inspect.bundle": "ng build app --prod --stats-json && npx webpack-bundle-analyzer dist/app/stats.json",
-    "format:check": "prettier --list-different \"src/{app,environments}/**/*{.ts,.js,.css,.scss}\"",
+    "format:check": "prettier --list-different \"src/{app,environments}/**/*.{ts,js,css,scss,html}\"",
+    "format:fix": "prettier --write \"src/{app,environments}/**/*.{ts,js,css,scss,html}\"",
     "build.tomcat": "npm run build -- --base-href ./ && jar -cvf docker/tomcat/artifacts/content-app.war -C dist/app/ .",
     "build.tomcat.e2e": "./build-tomcat-e2e.sh",
     "e2e.tomcat": "npm run wd:update && protractor --baseUrl=http://localhost:4000/content-app/",
     "docker.tomcat.start": "cd docker/tomcat && docker-compose up -d --build && wait-on http://localhost:8080 && wait-on http://localhost:4000",
     "docker.tomcat.stop": "cd docker/tomcat && docker-compose stop",
-    "docker.tomcat.e2e": "npm run docker.tomcat.start && npm run e2e.tomcat"
+    "docker.tomcat.e2e": "npm run docker.tomcat.start && npm run e2e.tomcat",
+    "lint:staged": "lint-staged"
   },
   "private": true,
   "dependencies": {
@@ -88,7 +90,9 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lint-staged": "^8.1.0",
     "ng-packagr": "^4.4.0",
+    "pre-commit": "^1.2.2",
     "prettier": "^1.15.3",
     "protractor": "^5.4.0",
     "rimraf": "2.6.2",
@@ -100,5 +104,12 @@
     "tslint": "~5.11.0",
     "typescript": "^3.1.6",
     "wait-on": "^3.0.1"
-  }
+  },
+  "lint-staged": {
+    "*.{ts,js,css,scss,html}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  },
+  "pre-commit": "lint:staged"
 }

src/app/components/common/icon/icon.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="isCustom; else: default">
+<ng-container *ngIf="isCustom; else default">
   <mat-icon [svgIcon]="value"></mat-icon>
 </ng-container>
 

src/app/components/create-menu/create-menu.component.html

@@ -3,9 +3,14 @@
     data-automation-id="create-button"
     mat-raised-button
     [matMenuTriggerFor]="rootMenu"
-    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
-    <span class="app-create-menu__text">{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
+  >
-    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">arrow_drop_down</mat-icon>
+    <span class="app-create-menu__text">{{
+      'APP.NEW_MENU.LABEL' | translate
+    }}</span>
+    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
+      >arrow_drop_down</mat-icon
+    >
   </button>
 </ng-container>
 
@@ -17,12 +22,22 @@
     data-automation-id="create-button"
     [matMenuTriggerFor]="rootMenu"
     #createMenu="matMenuTrigger"
-    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
-    <mat-icon [color]="createMenu.menuOpen? 'accent': 'primary'" title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
+  >
+    <mat-icon
+      [color]="createMenu.menuOpen ? 'accent' : 'primary'"
+      title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
+      >queue</mat-icon
+    >
   </button>
 </ng-container>
 
-<mat-menu #rootMenu="matMenu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
+<mat-menu
+  #rootMenu="matMenu"
+  class="app-create-menu__root-menu app-create-menu__sub-menu"
+  [overlapTrigger]="false"
+  yPosition="below"
+>
   <ng-container *ngFor="let action of createActions; trackBy: trackById">
     <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
   </ng-container>

src/app/components/current-user/current-user.component.html

@@ -1,15 +1,16 @@
 <div title="{{ (profile$ | async)?.id }}">
   <div class="current-user__full-name">{{ (profile$ | async)?.userName }}</div>
-    <div
+  <div class="current-user__avatar am-avatar" [matMenuTriggerFor]="userMenu">
-        class="current-user__avatar am-avatar"
-        [matMenuTriggerFor]="userMenu">
     {{ (profile$ | async)?.initials }}
   </div>
 </div>
 
 <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
-    <button *ngIf="languagePicker$ | async"
+  <button
-        mat-menu-item [matMenuTriggerFor]="langMenu">
+    *ngIf="(languagePicker$ | async)"
+    mat-menu-item
+    [matMenuTriggerFor]="langMenu"
+  >
     {{ 'APP.LANGUAGE' | translate }}
   </button>
 

src/app/components/info-drawer/info-drawer.component.html

@@ -6,8 +6,13 @@
     <adf-info-drawer-tab
       *ngFor="let tab of tabs"
       [icon]="tab.icon"
-            [label]="tab.title | translate">
+      [label]="tab.title | translate"
-            <adf-dynamic-tab [node]="displayNode" [id]="tab.component" [attr.data-automation-id]="tab.component">
+    >
+      <adf-dynamic-tab
+        [node]="displayNode"
+        [id]="tab.component"
+        [attr.data-automation-id]="tab.component"
+      >
       </adf-dynamic-tab>
     </adf-info-drawer-tab>
   </adf-info-drawer>

src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.html

@@ -1,6 +1,8 @@
 <mat-card *ngIf="node">
   <mat-card-content *ngIf="!edit">
-        <div class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+    <div
+      class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
+    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -18,7 +20,9 @@
       </div>
     </div>
 
-        <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+    <div
+      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
+    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -36,7 +40,9 @@
       </div>
     </div>
 
-        <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+    <div
+      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
+    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -47,14 +53,18 @@
             </span>
 
             <span class="mat-input-element">
-                            {{ (getVisibilityLabel(form.controls.visibility.value)) | translate }}
+              {{
+                getVisibilityLabel(form.controls.visibility.value) | translate
+              }}
             </span>
           </div>
         </div>
       </div>
     </div>
 
-        <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+    <div
+      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
+    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -82,21 +92,35 @@
   <mat-card-content *ngIf="edit">
     <form [formGroup]="form" autocomplete="off">
       <mat-form-field class="adf-full-width">
-                <input matInput cdkFocusInitial required placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
+        <input
-                    formControlName="title">
+          matInput
+          cdkFocusInitial
+          required
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
+          formControlName="title"
+        />
 
-                <mat-hint *ngIf="libraryTitleExists">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
+        <mat-hint *ngIf="libraryTitleExists">{{
+          'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate
+        }}</mat-hint>
         <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
           {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
         </mat-error>
       </mat-form-field>
 
       <mat-form-field class="adf-full-width">
-                <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id">
+        <input
+          matInput
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
+          formControlName="id"
+        />
       </mat-form-field>
 
       <mat-form-field class="adf-full-width">
-                <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
+        <mat-select
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}"
+          formControlName="visibility"
+        >
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
           </mat-option>
@@ -104,8 +128,12 @@
       </mat-form-field>
 
       <mat-form-field class="adf-full-width">
-                <textarea matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}" rows="3"
+        <textarea
-                    formControlName="description"></textarea>
+          matInput
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
+          rows="3"
+          formControlName="description"
+        ></textarea>
 
         <mat-error *ngIf="form.controls['description'].hasError('maxlength')">
           {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
@@ -118,7 +146,12 @@
     <button mat-button color="secondary" (click)="cancel()">
       {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
     </button>
-        <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
+    <button
+      mat-button
+      color="primary"
+      [disabled]="form.invalid || form.pristine"
+      (click)="update()"
+    >
       {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
     </button>
   </mat-card-actions>

src/app/components/layout/app-layout/app-layout.component.html

@@ -1,7 +1,4 @@
-<adf-upload-drag-area
+<adf-upload-drag-area [parentId]="currentFolderId" [disabled]="!canUpload">
-    [parentId]="currentFolderId"
-    [disabled]="!canUpload">
-
   <adf-sidenav-layout
     #layout
     [sidenavMin]="70"
@@ -9,13 +6,14 @@
     [stepOver]="600"
     [hideSidenav]="hideSidenav"
     [expandedSidenav]="expandedSidenav"
-        (expanded)="onExpanded($event)">
+    (expanded)="onExpanded($event)"
-
+  >
     <adf-sidenav-layout-header>
       <ng-template>
         <app-header
           *ngIf="!hideSidenav"
-                (toggleClicked)="layout.toggleMenu($event)">
+          (toggleClicked)="layout.toggleMenu($event)"
+        >
         </app-header>
       </ng-template>
     </adf-sidenav-layout-header>
@@ -27,11 +25,8 @@
     </adf-sidenav-layout-navigation>
 
     <adf-sidenav-layout-content>
-            <ng-template>
+      <ng-template> <router-outlet></router-outlet> </ng-template>
-                <router-outlet></router-outlet>
-            </ng-template>
     </adf-sidenav-layout-content>
-
   </adf-sidenav-layout>
 
   <app-file-uploading-dialog position="left"></app-file-uploading-dialog>

src/app/components/login/login.component.html

@@ -4,5 +4,6 @@
   successRoute="/personal-files"
   [logoImageUrl]="'./assets/images/alfresco-logo.svg'"
   [showRememberMe]="false"
-    [showLoginActions]="false">
+  [showLoginActions]="false"
+>
 </adf-login>

src/app/components/permissions/permission-dialog/node-permissions.dialog.html

@@ -3,5 +3,7 @@
   <app-permission-manager [nodeId]="nodeId"></app-permission-manager>
 </section>
 <footer mat-dialog-actions>
-   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{'PERMISSIONS.DIALOG.CLOSE' | translate}}</button>
+  <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>
+    {{'PERMISSIONS.DIALOG.CLOSE' | translate}}
+  </button>
 </footer>

src/app/components/permissions/permission-manager/permission-manager.component.html

@@ -5,8 +5,13 @@
     [nodeId]="nodeId"
     [color]="toggleStatus ? 'accent' : 'primary'"
     (error)="onError($event)"
-      (updated)="onUpdatedPermissions($event)">
+    (updated)="onUpdatedPermissions($event)"
-      {{ (toggleStatus ? 'PERMISSIONS.DIALOG.INHERITED_PERMISSIONS_BUTTON' : 'PERMISSIONS.DIALOG.INHERIT_PERMISSIONS_BUTTON') | translate }}
+  >
+    {{
+      (toggleStatus
+        ? 'PERMISSIONS.DIALOG.INHERITED_PERMISSIONS_BUTTON'
+        : 'PERMISSIONS.DIALOG.INHERIT_PERMISSIONS_BUTTON') | translate
+    }}
   </button>
   <button mat-button (click)="openAddPermissionDialog($event)">
     {{ 'PERMISSIONS.DIALOG.ADD_USER_OR_GROUP' | translate }}
@@ -17,5 +22,6 @@
   #permissionList
   [nodeId]="nodeId"
   (error)="onError($event)"
-  (update)="onUpdate()">
+  (update)="onUpdate()"
+>
 </adf-permission-list>

src/app/components/preview/preview.component.html

@@ -1,5 +1,4 @@
 <ng-container *ngIf="nodeId">
-
   <adf-viewer
     [fileNodeId]="nodeId"
     [allowNavigate]="navigateMultiple"
@@ -13,8 +12,8 @@
     (showViewerChange)="onVisibilityChanged($event)"
     (navigateBefore)="onNavigateBefore()"
     (navigateNext)="onNavigateNext()"
-        [ngClass]="hasRightSidebar ? 'hide-last-divider': ''">
+    [ngClass]="hasRightSidebar ? 'hide-last-divider' : ''"
-
+  >
     <adf-viewer-sidebar>
       <aca-info-drawer [node]="selection.file"></aca-info-drawer>
     </adf-viewer-sidebar>
@@ -26,13 +25,20 @@
     </adf-viewer-open-with>
 
     <adf-viewer-toolbar-actions>
-            <ng-container *ngFor="let action of viewerToolbarActions; trackBy: trackByActionId">
+      <ng-container
+        *ngFor="let action of viewerToolbarActions; trackBy: trackByActionId"
+      >
         <aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
       </ng-container>
     </adf-viewer-toolbar-actions>
 
     <adf-viewer-more-actions *ngIf="viewerToolbarMoreActions.length">
-            <ng-container *ngFor="let action of viewerToolbarMoreActions; trackBy: trackByActionId">
+      <ng-container
+        *ngFor="
+          let action of viewerToolbarMoreActions;
+          trackBy: trackByActionId
+        "
+      >
         <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
       </ng-container>
     </adf-viewer-more-actions>
@@ -45,11 +51,11 @@
             [node]="selection.file?.entry"
             [url]="url"
             [extension]="extension"
-                        [attr.data-automation-id]="ext.component">
+            [attr.data-automation-id]="ext.component"
+          >
           </app-preview-extension>
         </ng-template>
       </adf-viewer-extension>
     </ng-container>
-
   </adf-viewer>
 </ng-container>

src/app/components/search/search-input-control/search-input-control.component.html

@@ -1,21 +1,33 @@
 <div class="app-search-container">
-    <button mat-icon-button
+  <button
+    mat-icon-button
     id="app-search-button"
     class="app-search-button"
-            [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+    [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
-        <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+  >
+    <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate"
+      >search</mat-icon
+    >
   </button>
   <mat-form-field class="app-input-form-field" [floatLabel]="'never'">
-        <input matInput #searchInput
+    <input
+      matInput
+      #searchInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
       [type]="inputType"
       id="app-control-input"
       [(ngModel)]="searchTerm"
       (ngModelChange)="inputChange($event)"
       (keyup.enter)="searchSubmit($event)"
-            [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
+      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
+    />
     <div matSuffix class="app-suffix-search-icon-wrapper">
-          <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
+      <mat-icon
+        *ngIf="searchTerm.length"
+        (click)="clear()"
+        class="app-clear-icon"
+        >clear</mat-icon
+      >
     </div>
   </mat-form-field>
 </div>

src/app/components/search/search-input/search-input.component.html

@@ -1,17 +1,26 @@
-<div class="app-search-container searchMenuTrigger" [matMenuTriggerFor]="searchOptionsMenu"
+<div
-     (menuOpened)="onMenuOpened()">
+  class="app-search-container searchMenuTrigger"
-    <button mat-icon-button
+  [matMenuTriggerFor]="searchOptionsMenu"
+  (menuOpened)="onMenuOpened()"
+>
+  <button
+    mat-icon-button
     class="app-search-button"
-            [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+    [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
-        <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+  >
+    <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate"
+      >search</mat-icon
+    >
   </button>
   <mat-form-field class="app-input-form-field" [floatLabel]="'never'">
-        <input matInput
+    <input
+      matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
       [type]="'text'"
       [disabled]="true"
       [value]="searchedWord"
-               [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
+      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
+    />
 
     <div matSuffix class="app-suffix-search-icon-wrapper">
       <mat-icon>arrow_drop_down</mat-icon>
@@ -19,21 +28,31 @@
   </mat-form-field>
 </div>
 
-<mat-menu #searchOptionsMenu="matMenu" [overlapTrigger]="true" class="app-search-options-menu">
+<mat-menu
-    <app-search-input-control #searchInputControl
+  #searchOptionsMenu="matMenu"
+  [overlapTrigger]="true"
+  class="app-search-options-menu"
+>
+  <app-search-input-control
+    #searchInputControl
     (click)="$event.stopPropagation()"
     (submit)="onSearchSubmit($event)"
-                              (searchChange)="onSearchChange($event)">
+    (searchChange)="onSearchChange($event)"
+  >
   </app-search-input-control>
-    <mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
+  <mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{
+    'SEARCH.INPUT.HINT' | translate
+  }}</mat-hint>
 
   <div id="search-options">
-        <mat-checkbox *ngFor="let option of searchOptions"
+    <mat-checkbox
+      *ngFor="let option of searchOptions"
       id="{{ option.id }}"
       [(ngModel)]="option.value"
       [disabled]="option.shouldDisable()"
       (change)="searchByOption()"
-                    (click)="$event.stopPropagation()">
+      (click)="$event.stopPropagation()"
+    >
       {{ option.key | translate }}
     </mat-checkbox>
   </div>

src/app/components/search/search-results-row/search-results-row.component.html

@@ -1,17 +1,26 @@
 <div class="line">
   <span *ngIf="isFile" (click)="showPreview()" class="link"> {{ name }} </span>
-    <span *ngIf="!isFile" (click)="navigate()" class="bold link"> {{ name }} </span>
+  <span *ngIf="!isFile" (click)="navigate()" class="bold link">
+    {{ name }}
+  </span>
   <span *ngIf="hasTitle && showTitle"> ( {{ title }} ) </span>
 </div>
 
 <div *ngIf="hasDescription" class="line">{{ description }}</div>
 
 <div class="line">
-    {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.MODIFIED' | translate }}: {{ modifiedAt | date:'medium' }}
+  {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.MODIFIED' | translate }}:
+  {{ modifiedAt | date: 'medium' }}
 
   by <span> {{ user }} </span>
 
-    <span *ngIf="size">| {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.SIZE' | translate }}: {{ size | adfFileSize }} </span>
+  <span *ngIf="size"
+    >| {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.SIZE' | translate }}:
+    {{ size | adfFileSize }}
+  </span>
 </div>
 
-<div class="line">{{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.LOCATION' | translate }}: <aca-location-link [context]="context"></aca-location-link></div>
+<div class="line">
+  {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.LOCATION' | translate }}:
+  <aca-location-link [context]="context"></aca-location-link>
+</div>

src/app/components/search/search-results/search-results.component.html

@@ -1,8 +1,6 @@
 <app-page-layout>
-
   <app-page-layout-header>
-    <adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
+    <adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE"> </adf-breadcrumb>
-    </adf-breadcrumb>
     <adf-toolbar class="inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
@@ -15,26 +13,49 @@
       <div class="adf-search-results">
         <adf-search-filter
           #searchFilter
-              [ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"></adf-search-filter>
+          [ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"
+        ></adf-search-filter>
         <div class="adf-search-results__content">
           <mat-progress-bar
             *ngIf="isLoading"
             color="primary"
-                  mode="indeterminate">
+            mode="indeterminate"
+          >
           </mat-progress-bar>
-              <div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
+          <div
+            class="adf-search-results__content-header content"
+            *ngIf="data?.list.entries.length"
+          >
             <div class="content__side--left">
-                      <div class="adf-search-results--info-text"
+              <div
-                           *ngIf="totalResults !== 1">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
+                class="adf-search-results--info-text"
-                      <div class="adf-search-results--info-text"
+                *ngIf="totalResults !== 1"
-                           *ngIf="totalResults === 1">{{ 'APP.BROWSE.SEARCH.FOUND_ONE_RESULT' | translate: { number: totalResults } }}</div>
+              >
+                {{
+                  'APP.BROWSE.SEARCH.FOUND_RESULTS'
+                    | translate: { number: totalResults }
+                }}
+              </div>
+              <div
+                class="adf-search-results--info-text"
+                *ngIf="totalResults === 1"
+              >
+                {{
+                  'APP.BROWSE.SEARCH.FOUND_ONE_RESULT'
+                    | translate: { number: totalResults }
+                }}
+              </div>
 
               <div class="adf-search-results__facets">
-                              <adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
+                <adf-search-chip-list
+                  [searchFilter]="searchFilter"
+                ></adf-search-chip-list>
               </div>
             </div>
 
-                  <adf-search-sorting-picker class="content__side--right"></adf-search-sorting-picker>
+            <adf-search-sorting-picker
+              class="content__side--right"
+            ></adf-search-sorting-picker>
           </div>
 
           <adf-document-list
@@ -46,24 +67,24 @@
             [sortingMode]="'server'"
             [sorting]="sorting"
             [node]="data"
-                  (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
+            (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
-
+          >
             <data-columns>
               <data-column
                 [key]="'$thumbnail'"
                 [type]="'image'"
                 [sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
-                          [sortable]="false">
+                [sortable]="false"
+              >
               </data-column>
 
-                      <data-column
+              <data-column key type="text">
-                          key
-                          type="text">
                 <ng-template let-context>
-                                  <aca-search-results-row [context]="context"></aca-search-results-row>
+                  <aca-search-results-row
+                    [context]="context"
+                  ></aca-search-results-row>
                 </ng-template>
               </data-column>
-
             </data-columns>
 
             <empty-folder-content>
@@ -79,17 +100,18 @@
             </empty-folder-content>
           </adf-document-list>
 
-              <adf-pagination *ngIf="!documentList.isEmpty()"
+          <adf-pagination
+            *ngIf="!documentList.isEmpty()"
             acaPagination
             [target]="documentList"
-                  (change)="onPaginationChanged($event)">
+            (change)="onPaginationChanged($event)"
+          >
           </adf-pagination>
         </div>
       </div>
     </div>
-    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+    <div class="sidebar" *ngIf="(infoDrawerOpened$ | async)">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
   </app-page-layout-content>
-
 </app-page-layout>

src/app/components/settings/settings.component.html

@@ -1,25 +1,36 @@
 <adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async">
   <adf-toolbar-title>
-        <a class="app-menu__title" title="{{ appName$ | async }}" [routerLink]="[ '/' ]">
+    <a
+      class="app-menu__title"
+      title="{{ appName$ | async }}"
+      [routerLink]="['/']"
+    >
       <img [src]="logo" alt="{{ appName$ | async }}" />
     </a>
   </adf-toolbar-title>
 </adf-toolbar>
 
-
 <mat-accordion multi="true" displayMode="flat">
   <mat-expansion-panel>
     <mat-expansion-panel-header>
-            <mat-panel-title>{{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }}</mat-panel-title>
+      <mat-panel-title>{{
+        'APP.SETTINGS.REPOSITORY-SETTINGS' | translate
+      }}</mat-panel-title>
     </mat-expansion-panel-header>
-        <form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
+    <form
+      [formGroup]="form"
+      novalidate
+      (ngSubmit)="apply(form.value, form.valid)"
+    >
       <div>
         <mat-form-field class="settings-input">
-                    <input matInput
+          <input
+            matInput
             formControlName="ecmHost"
             type="text"
             tabindex="2"
-                        placeholder="ACS Repository URL">
+            placeholder="ACS Repository URL"
+          />
           <mat-error *ngIf="form.get('ecmHost').hasError('pattern')">
             {{ 'APP.SETTINGS.INVALID-VALUE-FORMAT' | translate }}
           </mat-error>
@@ -33,7 +44,12 @@
         <button mat-button (click)="reset()">
           {{ 'APP.SETTINGS.RESET' | translate }}
         </button>
-                <button mat-button color="primary" type="submit" [disabled]="!form.valid">
+        <button
+          mat-button
+          color="primary"
+          type="submit"
+          [disabled]="!form.valid"
+        >
           {{ 'APP.SETTINGS.APPLY' | translate }}
         </button>
       </div>
@@ -48,7 +64,8 @@
     </mat-expansion-panel-header>
     <mat-checkbox
       [ngModel]="languagePicker$ | async"
-            (change)="onLanguagePickerValueChanged($event)">
+      (change)="onLanguagePickerValueChanged($event)"
+    >
       Language Picker
     </mat-checkbox>
   </mat-expansion-panel>
@@ -62,7 +79,8 @@
     <div *ngFor="let flag of experimental">
       <mat-checkbox
         [(ngModel)]="flag.value"
-                (change)="onToggleExperimentalFeature(flag.key, $event)">
+        (change)="onToggleExperimentalFeature(flag.key, $event)"
+      >
         {{ flag.key }}
       </mat-checkbox>
     </div>

src/app/components/shared-link-view/shared-link-view.component.html

@@ -1,6 +1,3 @@
 <ng-container *ngIf="sharedLinkId">
-    <adf-viewer
+  <adf-viewer [sharedLinkId]="sharedLinkId" [allowGoBack]="false"> </adf-viewer>
-        [sharedLinkId]="sharedLinkId"
-        [allowGoBack]="false">
-    </adf-viewer>
 </ng-container>

src/app/components/shared/content-node-share/content-node-share.dialog.html

@@ -1,6 +1,5 @@
 <div class="adf-share-link__dialog-content">
-    <h1 data-automation-id="adf-share-dialog-title"
+  <h1 data-automation-id="adf-share-dialog-title" class="adf-share-link__title">
-        class="adf-share-link__title">
     {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
   </h1>
 
@@ -15,23 +14,29 @@
         data-automation-id="adf-share-toggle"
         [checked]="isFileShared"
         [disabled]="isDisabled"
-                (change)="onSlideShareChange()">
+        (change)="onSlideShareChange()"
+      >
       </mat-slide-toggle>
     </div>
 
     <form [formGroup]="form">
       <mat-form-field class="adf-full-width">
-                <input #sharedLinkInput
+        <input
+          #sharedLinkInput
           data-automation-id="adf-share-link"
           class="adf-share-link__input"
           matInput
           cdkFocusInitial
           placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
           formControlName="sharedUrl"
-                    readonly="readonly">
+          readonly="readonly"
-                    <mat-icon class="adf-input-action" matSuffix
+        />
+        <mat-icon
+          class="adf-input-action"
+          matSuffix
           [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate"
-                          [adf-clipboard]="sharedLinkInput">
+          [adf-clipboard]="sharedLinkInput"
+        >
           link
         </mat-icon>
       </mat-form-field>
@@ -44,7 +49,8 @@
           color="primary"
           data-automation-id="adf-expire-toggle"
           [checked]="form.controls['time'].value"
-                    (change)="onToggleExpirationDate($event)">
+          (change)="onToggleExpirationDate($event)"
+        >
         </mat-slide-toggle>
       </div>
 
@@ -52,19 +58,25 @@
         <mat-datetimepicker-toggle
           #matDatetimepickerToggle="matDatetimepickerToggle"
           [for]="datetimePicker"
-                    matSuffix>
+          matSuffix
+        >
         </mat-datetimepicker-toggle>
-                <mat-datetimepicker #datetimePicker
+        <mat-datetimepicker
+          #datetimePicker
           (closed)="onDatetimepickerClosed()"
-                    type="date"  openOnFocus="true"
+          type="date"
-                    timeInterval="1">
+          openOnFocus="true"
+          timeInterval="1"
+        >
         </mat-datetimepicker>
-                <input class="adf-share-link__input"
+        <input
+          class="adf-share-link__input"
           #dateTimePickerInput
           matInput
           [min]="minDate"
           formControlName="time"
-                    [matDatetimepicker]="datetimePicker">
+          [matDatetimepicker]="datetimePicker"
+        />
       </mat-form-field>
     </form>
   </mat-dialog-content>
@@ -72,7 +84,10 @@
   <div mat-dialog-actions>
     <button
       data-automation-id="adf-share-dialog-close"
-            mat-button color="primary" mat-dialog-close>
+      mat-button
+      color="primary"
+      mat-dialog-close
+    >
       {{ 'SHARE.CLOSE' | translate }}
     </button>
   </div>

src/app/components/shared/toggle-shared/toggle-shared.component.html

@@ -5,7 +5,7 @@
     (click)="editSharedNode(selection)"
   >
     <mat-icon>link</mat-icon>
-    <ng-container *ngIf="isShared(selection); else: not_shared">
+    <ng-container *ngIf="isShared(selection); else not_shared">
       <span>{{ 'APP.ACTIONS.SHARE_EDIT' | translate }}</span>
     </ng-container>
   </button>

src/app/components/sidenav/sidenav.component.html

@@ -5,36 +5,41 @@
 
   <div *ngFor="let group of groups; trackBy: trackById" class="section">
     <div class="menu">
-            <div *ngFor="let item of group.items; trackBy: trackById"
+      <div
+        *ngFor="let item of group.items; trackBy: trackById"
         routerLinkActive
-                #routerLink="routerLinkActive">
+        #routerLink="routerLinkActive"
-
+      >
         <ng-container *ngIf="showLabel">
           <ng-container *ngIf="!item.children">
-                        <div class="menu__item"
+            <div class="menu__item" [attr.title]="item.description | translate">
-                            [attr.title]="item.description | translate">
+              <button
-                            <button [id]="item.id"
+                [id]="item.id"
-                                mat-icon-button mat-ripple
+                mat-icon-button
+                mat-ripple
                 [routerLink]="item.url"
                 [color]="routerLink.isActive ? 'accent' : 'primary'"
                 [attr.aria-label]="item.title | translate"
                 matRippleColor="primary"
                 [matRippleTrigger]="rippleTrigger"
                 [matRippleCentered]="true"
-                                [matRippleRadius]="20">
+                [matRippleRadius]="20"
-
+              >
                 <mat-icon>{{ item.icon }}</mat-icon>
               </button>
 
-                            <span #rippleTrigger
+              <span
+                #rippleTrigger
                 class="item--label item--parent"
                 [routerLink]="item.url"
                 [attr.aria-label]="item.title | translate"
                 [ngClass]="{
                   'item--active': routerLink.isActive,
                   'item--default': !routerLink.isActive
-                                }">
+                }"
-                                {{ item.title | translate }}</span>
+              >
+                {{ item.title | translate }}</span
+              >
             </div>
           </ng-container>
 
@@ -43,61 +48,83 @@
               #expansionPanel="matExpansionPanel"
               [acaExpansionPanel]="item"
               [expanded]="routerLink.isActive"
-                            [@.disabled]="true">
+              [@.disabled]="true"
-                            <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px">
+            >
+              <mat-expansion-panel-header
+                expandedHeight="48px"
+                collapsedHeight="48px"
+              >
                 <mat-panel-title [attr.title]="item.description | translate">
-                                    <mat-icon [color]="routerLink.isActive && !expansionPanel.expanded? 'accent': 'primary'">
+                  <mat-icon
+                    [color]="
+                      routerLink.isActive && !expansionPanel.expanded
+                        ? 'accent'
+                        : 'primary'
+                    "
+                  >
                     {{ item.icon }}
                   </mat-icon>
                   <span
                     class="item--label item--parent"
                     [ngClass]="{
-                                            'item--default': !routerLink.isActive && expansionPanel.expanded,
+                      'item--default':
-                                            'item--active': routerLink.isActive && !expansionPanel.expanded
+                        !routerLink.isActive && expansionPanel.expanded,
+                      'item--active':
+                        routerLink.isActive && !expansionPanel.expanded
                     }"
-                                    >{{ item.title | translate }}</span>
+                    >{{ item.title | translate }}</span
+                  >
                 </mat-panel-title>
               </mat-expansion-panel-header>
 
-                            <div *ngFor="let child of item.children; trackBy: trackById"
+              <div
-                                routerLinkActive #childRouteActive="routerLinkActive"
+                *ngFor="let child of item.children; trackBy: trackById"
-                                [attr.title]="child.description | translate">
+                routerLinkActive
-
+                #childRouteActive="routerLinkActive"
+                [attr.title]="child.description | translate"
+              >
                 <ng-container *ngIf="child.icon">
-                                    <button [id]="child.id"
+                  <button
-                                        mat-icon-button mat-ripple
+                    [id]="child.id"
+                    mat-icon-button
+                    mat-ripple
                     [routerLink]="child.url"
                     [color]="childRouteActive.isActive ? 'accent' : 'primary'"
                     [attr.aria-label]="child.title | translate"
                     matRippleColor="primary"
                     [matRippleTrigger]="rippleTrigger"
                     [matRippleCentered]="true"
-                                        [matRippleRadius]="20">
+                    [matRippleRadius]="20"
-
+                  >
                     <mat-icon>{{ child.icon }}</mat-icon>
                   </button>
 
-                                    <span #rippleTrigger
+                  <span
+                    #rippleTrigger
                     [routerLink]="child.url"
                     class="item--label item--label__trigger"
                     [ngClass]="{
                       'item--active': childRouteActive.isActive,
                       'item--default': !childRouteActive.isActive
-                                        }">
+                    }"
+                  >
                     {{ child.title | translate }}
                   </span>
                 </ng-container>
 
                 <ng-container *ngIf="!child.icon">
-                                    <div [id]="child.id"
+                  <div
+                    [id]="child.id"
                     class="menu__item item--label item--child"
                     [routerLink]="child.url"
-                                        [attr.aria-label]="child.title | translate">
+                    [attr.aria-label]="child.title | translate"
-
+                  >
-                                        <span [ngClass]="{
+                    <span
+                      [ngClass]="{
                         'item--active': childRouteActive.isActive,
                         'item--default': !childRouteActive.isActive
-                                        }">
+                      }"
+                    >
                       {{ child.title | translate }}
                     </span>
                   </div>
@@ -110,43 +137,54 @@
         <ng-container *ngIf="!showLabel">
           <ng-container *ngIf="!item.children">
             <div class="menu__item">
-                                <button [id]="item.id"
+              <button
-                                    mat-icon-button [routerLink]="item.url"
+                [id]="item.id"
+                mat-icon-button
+                [routerLink]="item.url"
                 [color]="routerLink.isActive ? 'accent' : 'primary'"
                 [attr.aria-label]="item.title | translate"
-                                    [attr.title]="item.description | translate">
+                [attr.title]="item.description | translate"
-
+              >
                 <mat-icon>{{ item.icon }}</mat-icon>
               </button>
             </div>
           </ng-container>
 
           <ng-container *ngIf="item.children && item.children.length">
-                        <div class="menu__item"
+            <div class="menu__item" [attr.title]="item.description | translate">
-                            [attr.title]="item.description | translate">
+              <button
-                            <button [id]="item.id"
+                [id]="item.id"
                 color="accent"
                 mat-icon-button
                 #childMenu="matMenuTrigger"
-                                [matMenuTriggerFor]="menu">
+                [matMenuTriggerFor]="menu"
-
+              >
                 <mat-icon
-                                    [color]="routerLink.isActive || childMenu.menuOpen? 'accent': 'primary'">
+                  [color]="
+                    routerLink.isActive || childMenu.menuOpen
+                      ? 'accent'
+                      : 'primary'
+                  "
+                >
                   {{ item.icon }}
                 </mat-icon>
               </button>
             </div>
 
             <mat-menu #menu="matMenu" [overlapTrigger]="false">
-                            <button mat-menu-item
+              <button
+                mat-menu-item
                 *ngFor="let child of item.children; trackBy: trackById"
                 routerLinkActive
                 #menuRouterLink="routerLinkActive"
                 [routerLink]="child.url"
                 [attr.title]="child.description | translate"
-                                [id]="child.id">
+                [id]="child.id"
-
+              >
-                                <span class="mat-button" [ngClass]="{ 'mat-primary': menuRouterLink.isActive }">
+                <span
+                  class="mat-button"
+                  [ngClass]="{ 'mat-primary': menuRouterLink.isActive }"
+                >
                   {{ child.title | translate }}
                 </span>
               </button>

src/app/components/toolbar/toolbar-action/toolbar-action.component.html

@@ -1,26 +1,21 @@
 <ng-container [ngSwitch]="actionRef.type">
   <ng-container *ngSwitchCase="'default'">
-    <app-toolbar-button
+    <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color">
-      [type]="type"
-      [actionRef]="actionRef"
-      [color]="color">
     </app-toolbar-button>
   </ng-container>
 
   <ng-container *ngSwitchCase="'button'">
-    <app-toolbar-button
+    <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color">
-      [type]="type"
-      [actionRef]="actionRef"
-      [color]="color">
     </app-toolbar-button>
   </ng-container>
 
-  <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
+  <adf-toolbar-divider
+    *ngSwitchCase="'separator'"
+    [id]="actionRef.id"
+  ></adf-toolbar-divider>
 
   <ng-container *ngSwitchCase="'menu'">
-    <app-toolbar-menu
+    <app-toolbar-menu [actionRef]="actionRef" [color]="color">
-      [actionRef]="actionRef"
-      [color]="color">
     </app-toolbar-menu>
   </ng-container>
 
@@ -28,4 +23,3 @@
     <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
   </ng-container>
 </ng-container>
-

src/app/components/upload-dialog/file-uploading-dialog.component.html

@@ -1,27 +1,38 @@
-<div *ngIf="isDialogActive"
+<div
+  *ngIf="isDialogActive"
   class="adf-upload-dialog"
   id="upload-dialog"
   [class.adf-upload-dialog--minimized]="isDialogMinimized"
   [class.adf-upload-dialog--position-left]="position === 'left'"
-     [class.adf-upload-dialog--position-right]="position === 'right'">
+  [class.adf-upload-dialog--position-right]="position === 'right'"
+>
   <header class="adf-upload-dialog__header">
     <button
       mat-button
       color="secondary"
       [disabled]="isConfirmation"
-            (click)="toggleMinimized()">
+      (click)="toggleMinimized()"
+    >
       <mat-icon
         mat-list-icon
-                title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}">
+        title="{{
+          (isDialogMinimized
+            ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE'
+            : 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate
+        }}"
+      >
         {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
       </mat-icon>
     </button>
 
     <span
       class="adf-upload-dialog__title"
-            *ngIf="!uploadList.isUploadCancelled()">
+      *ngIf="!uploadList.isUploadCancelled()"
-            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_COMPLETED'
+    >
-                | translate: {
+      {{
+        'FILE_UPLOAD.MESSAGES.UPLOAD_COMPLETED'
+          | translate
+            : {
                 completed: totalCompleted,
                 total: filesUploadingList.length
               }
@@ -30,13 +41,13 @@
 
     <span
       class="adf-upload-dialog__title"
-            *ngIf="uploadList.isUploadCancelled()">
+      *ngIf="uploadList.isUploadCancelled()"
+    >
       {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
     </span>
   </header>
 
-    <section class="adf-upload-dialog__info"
+  <section class="adf-upload-dialog__info" *ngIf="totalErrors">
-        *ngIf="totalErrors">
     {{
       (totalErrors > 1
         ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
@@ -45,25 +56,30 @@
     }}
   </section>
 
-    <section class="adf-upload-dialog__content"
+  <section
-        [class.adf-upload-dialog--padding]="isConfirmation">
+    class="adf-upload-dialog__content"
+    [class.adf-upload-dialog--padding]="isConfirmation"
+  >
     <app-file-uploading-list
       [class.adf-upload-dialog--hide]="isConfirmation"
       #uploadList
-            [files]="filesUploadingList">
+      [files]="filesUploadingList"
+    >
       <ng-template let-file="$implicit">
         <app-file-uploading-list-row
           [file]="file"
           [error]="getFileUploadError(file)"
           (remove)="uploadList.removeFile(file)"
-                        (cancel)="uploadList.cancelFile(file)">
+          (cancel)="uploadList.cancelFile(file)"
+        >
         </app-file-uploading-list-row>
       </ng-template>
     </app-file-uploading-list>
 
     <div
       class="adf-upload-dialog__confirmation"
-            [class.adf-upload-dialog--hide]="!isConfirmation">
+      [class.adf-upload-dialog--hide]="!isConfirmation"
+    >
       <p class="adf-upload-dialog__confirmation--title">
         {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
       </p>
@@ -74,14 +90,14 @@
     </div>
   </section>
 
-    <footer class="adf-upload-dialog__actions"
+  <footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation">
-            *ngIf="!isConfirmation">
     <button
       id="adf-upload-dialog-cancel-all"
       color="primary"
       mat-button
       *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
-            (click)="toggleConfirmation()">
+      (click)="toggleConfirmation()"
+    >
       {{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate }}
     </button>
 
@@ -90,18 +106,19 @@
       *ngIf="uploadList.isUploadCompleted() || uploadList.isUploadCancelled()"
       mat-button
       color="primary"
-            (click)="close()">
+      (click)="close()"
+    >
       {{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}
     </button>
   </footer>
 
-    <footer class="adf-upload-dialog__actions"
+  <footer class="adf-upload-dialog__actions" *ngIf="isConfirmation">
-            *ngIf="isConfirmation">
     <button
       id="adf-upload-dialog-cancel"
       color="secondary"
       mat-button
-            (click)="cancelAllUploads()">
+      (click)="cancelAllUploads()"
+    >
       {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}
     </button>
 
@@ -109,7 +126,8 @@
       id="adf-upload-dialog-confirm"
       mat-button
       color="primary"
-            (click)="toggleConfirmation()">
+      (click)="toggleConfirmation()"
+    >
       {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}
     </button>
   </footer>

src/app/components/upload-dialog/file-uploading-list-row.component.html

@@ -1,28 +1,30 @@
 <div class="adf-file-uploading-row">
-    <mat-icon
+  <mat-icon mat-list-icon class="adf-file-uploading-row__type">
-        mat-list-icon
-        class="adf-file-uploading-row__type">
     insert_drive_file
   </mat-icon>
 
-    <span
+  <span class="adf-file-uploading-row__name" title="{{ file.name }}">
-        class="adf-file-uploading-row__name"
-        title="{{ file.name }}">
     {{ file.name }}
   </span>
 
   <div
-        *ngIf="file.status === FileUploadStatus.Progress || file.status === FileUploadStatus.Starting"
+    *ngIf="
+      file.status === FileUploadStatus.Progress ||
+      file.status === FileUploadStatus.Starting
+    "
     (click)="onCancel(file)"
     class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
-        title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}">
+    title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}"
+  >
     <span class="adf-file-uploading-row__status">
-            {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
+      {{ file.progress.loaded | adfFileSize }} /
+      {{ file.progress.total | adfFileSize }}
     </span>
 
     <mat-icon
       mat-list-icon
-            class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel">
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel"
+    >
       clear
     </mat-icon>
   </div>
@@ -31,16 +33,19 @@
     *ngIf="file.status === FileUploadStatus.Complete"
     (click)="onRemove(file)"
     class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
-        title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}">
+    title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}"
+  >
     <mat-icon
       mat-list-icon
-            class="adf-file-uploading-row__status adf-file-uploading-row__status--done">
+      class="adf-file-uploading-row__status adf-file-uploading-row__status--done"
+    >
       check_circle
     </mat-icon>
 
     <mat-icon
       mat-list-icon
-            class="adf-file-uploading-row__action adf-file-uploading-row__action--remove">
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--remove"
+    >
       remove_circle
     </mat-icon>
   </div>
@@ -48,16 +53,19 @@
   <div
     *ngIf="file.status === FileUploadStatus.Pending"
     (click)="onCancel(file)"
-        class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle">
+    class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
+  >
     <mat-icon
       mat-list-icon
-            class="adf-file-uploading-row__status adf-file-uploading-row__status--pending">
+      class="adf-file-uploading-row__status adf-file-uploading-row__status--pending"
+    >
       schedule
     </mat-icon>
 
     <mat-icon
       mat-list-icon
-            class="adf-file-uploading-row__action adf-file-uploading-row__action--remove">
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--remove"
+    >
       remove_circle
     </mat-icon>
   </div>
@@ -65,17 +73,22 @@
   <!--todo: move to ADF ACA-2051 -->
   <div
     *ngIf="file.status === FileUploadStatus.Error"
-        class="adf-file-uploading-row__block adf-file-uploading-row__status--error">
+    class="adf-file-uploading-row__block adf-file-uploading-row__status--error"
+  >
     <mat-icon mat-list-icon [attr.title]="error?.message | translate">
       report_problem
     </mat-icon>
   </div>
 
   <div
-        *ngIf="file.status === FileUploadStatus.Cancelled  ||
+    *ngIf="
+      file.status === FileUploadStatus.Cancelled ||
       file.status === FileUploadStatus.Aborted ||
-            file.status === FileUploadStatus.Deleted"
+      file.status === FileUploadStatus.Deleted
-        class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled">
+    "
+    class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled"
+  >
     {{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
   </div>
-<div>
+  <div></div>
+</div>

src/app/components/upload-dialog/file-uploading-list.component.html

@@ -1,7 +1,4 @@
 <div class="upload-list">
-    <ng-template
+  <ng-template ngFor [ngForOf]="files" [ngForTemplate]="template">
-        ngFor
-        [ngForOf]="files"
-        [ngForTemplate]="template">
   </ng-template>
 </div>

src/app/dialogs/library/library.dialog.html

@@ -11,9 +11,9 @@
         autocomplete="off"
       />
 
-      <mat-hint *ngIf="libraryTitleExists">{{
+      <mat-hint *ngIf="libraryTitleExists"
-        'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate
+        >{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint
-      }}</mat-hint>
+      >
 
       <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
         {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
@@ -22,7 +22,6 @@
       <mat-error *ngIf="form.controls['title'].errors?.message">
         {{ form.controls['title'].errors?.message | translate }}
       </mat-error>
-
     </mat-form-field>
 
     <mat-form-field>

src/app/dialogs/node-versions/node-versions.dialog.html

@@ -4,9 +4,12 @@
     [node]="node"
     [showComments]="'adf-version-manager.allowComments' | adfAppConfig:true"
     [allowDownload]="'adf-version-manager.allowDownload' | adfAppConfig:true"
-        (uploadError)="uploadError($event)">
+    (uploadError)="uploadError($event)"
+  >
   </adf-version-manager>
 </section>
 <footer mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="true">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
+  <button mat-button [mat-dialog-close]="true">
+    {{'VERSION.DIALOG.CLOSE' | translate}}
+  </button>
 </footer>