[ADF-5406] SCSS and HTML template path fixes (#7063)

* remove useless mixin

* fix scss paths

* style fixes

* fix styles

* style fixes

* style fixes

* style fixes

* style fixes

* insights fixes

* css and template path fixes

* bug fixes

lib/cli/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@alfresco/js-api": {
-      "version": "4.4.0-3493",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-4.4.0-3493.tgz",
-      "integrity": "sha512-O8qCJXSeL0S4/3VbCkAwDgeCCr4nQ4WqmpaLIU6YUGvO0AcPLYatKFoEuHlgCyex6gzRaYMQhoi1PhX/7cmQIg==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-4.4.0.tgz",
+      "integrity": "sha512-TLBXPc01Hi23gOCkkQy2p9lcBZgcCsymOkRPG0exclDaQnpgWBPFn0e+ykm7WA51hHusgZC2sUoZv1Y95nq6MA==",
       "requires": {
         "event-emitter": "^0.3.5",
         "minimatch": "3.0.4",

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss

@@ -1,55 +1,40 @@
-@mixin adf-aspect-list-dialog-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-
-    .adf {
-
-        &-aspect-list-dialog-title {
-            font-size: large;
-            font-weight: 200;
-            margin-top: 0;
-        }
-
-        &-aspect-list-dialog-description {
-            font-size: small;
-            line-height: normal;
-        }
-
-        &-aspect-list-dialog-information {
-            display: flex;
-            justify-content: space-between;
-            padding-left: 5px;
-            padding-right: 5px;
-            font-size: small;
-        }
-
-        &-aspect-list-dialog {
-            .mat-dialog-actions {
-                justify-content: space-between;
-            }
-        }
-
-        &-aspect-dialog-content {
-            padding-top: 3px;
-
-            .adf-aspect-property-table {
-
-                .mat-cell {
-                    font-size: smaller;
-                }
-
-                .mat-column-name {
-                    width: 30%;
-                }
-            }
-        }
-
-
+.adf {
+    &-aspect-list-dialog-title {
+        font-size: large;
+        font-weight: 200;
+        margin-top: 0;
     }
 
+    &-aspect-list-dialog-description {
+        font-size: small;
+        line-height: normal;
+    }
 
+    &-aspect-list-dialog-information {
+        display: flex;
+        justify-content: space-between;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-size: small;
+    }
+
+    &-aspect-list-dialog {
+        .mat-dialog-actions {
+            justify-content: space-between;
+        }
+    }
+
+    &-aspect-dialog-content {
+        padding-top: 3px;
+
+        .adf-aspect-property-table {
+            .mat-cell {
+                font-size: smaller;
+            }
+
+            .mat-column-name {
+                width: 30%;
+            }
+        }
+    }
 }

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -1,10 +1,5 @@
 @mixin adf-aspect-list-theme($theme) {
-
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     .adf {
 

lib/content-services/src/lib/aspect-list/aspect-list.component.ts

@@ -25,7 +25,6 @@ import { AspectEntry } from '@alfresco/js-api';
 @Component({
     selector: 'adf-aspect-list',
     templateUrl: './aspect-list.component.html',
-    styleUrls: ['./aspect-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -3,7 +3,6 @@
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     $breadcrumb-chevron-spacer: 2px;
     $breadcrumb-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -35,7 +35,6 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'adf-breadcrumb',
     templateUrl: './breadcrumb.component.html',
-    styleUrls: ['./breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: {
         'class': 'adf-breadcrumb'

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts

@@ -23,7 +23,6 @@ import { BreadcrumbComponent } from './breadcrumb.component';
 @Component({
     selector: 'adf-dropdown-breadcrumb',
     templateUrl: './dropdown-breadcrumb.component.html',
-    styleUrls: ['./dropdown-breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: {
         'class': 'adf-dropdown-breadcrumb'

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss

@@ -1,6 +1,4 @@
 @mixin adf-content-metadata-card-theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
     .adf-content-metadata-card {

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -22,7 +22,6 @@ import { NodeAspectService } from '../../../aspect-list/node-aspect.service';
 @Component({
     selector: 'adf-content-metadata-card',
     templateUrl: './content-metadata-card.component.html',
-    styleUrls: ['./content-metadata-card.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-content-metadata-card' }
 })

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -36,7 +36,6 @@ import { takeUntil, debounceTime, catchError, map } from 'rxjs/operators';
 @Component({
     selector: 'adf-content-metadata',
     templateUrl: './content-metadata.component.html',
-    styleUrls: ['./content-metadata.component.scss'],
     host: { 'class': 'adf-content-metadata' },
     encapsulation: ViewEncapsulation.None
 })

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss

@@ -1,7 +1,6 @@
 @mixin adf-content-node-selector-theme($theme) {
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
     $content-node-selector-thumbnail-width: 35px !default;
 
     .adf-search-results-label {

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -58,7 +58,6 @@ export const defaultValidation = () => true;
 
 @Component({
     selector: 'adf-content-node-selector-panel',
-    styleUrls: ['./content-node-selector-panel.component.scss'],
     templateUrl: './content-node-selector-panel.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-content-node-selector-panel' },

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -27,7 +27,6 @@ import { NodeAction } from '../document-list/models/node-action.enum';
 @Component({
     selector: 'adf-content-node-selector',
     templateUrl: './content-node-selector.component.html',
-    styleUrls: ['./content-node-selector.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class ContentNodeSelectorComponent implements OnInit {

lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts

@@ -24,7 +24,6 @@ import { DataRow } from '@alfresco/adf-core';
         <div class="adf-name-location-cell-name adf-datatable-cell-value" [title]="name">{{ name }}</div>
         <div class="adf-name-location-cell-location adf-datatable-cell-value" [title]="path">{{ path }}</div>
     `,
-    styleUrls: ['./name-location-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'adf-name-location-cell adf-datatable-content-cell' }

lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts

@@ -45,7 +45,6 @@ type DatePickerType = 'date' | 'time' | 'month' | 'datetime';
 @Component({
     selector: 'adf-share-dialog',
     templateUrl: './content-node-share.dialog.html',
-    styleUrls: ['./content-node-share.dialog.scss'],
     host: { class: 'adf-share-dialog' },
     encapsulation: ViewEncapsulation.None
 })

lib/content-services/src/lib/content-type/content-type-dialog.component.scss

@@ -1,10 +1,5 @@
 @mixin adf-content-type-dialog-theme($theme) {
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
 
     .adf {
 

lib/content-services/src/lib/content-type/content-type-dialog.component.ts

@@ -24,7 +24,6 @@ import { ContentTypeService } from './content-type.service';
 @Component({
     selector: 'adf-content-type-dialog',
     templateUrl: './content-type-dialog.component.html',
-    styleUrls: ['./content-type-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class ContentTypeDialogComponent implements OnInit {

lib/content-services/src/lib/dialogs/folder.dialog.scss

@@ -1,31 +1,31 @@
-.adf-fill-remaining-space {
-    flex: 1 1 auto;
-}
-
-.adf-full-width {
-    width: 100%;
-}
-
-.adf-lock-file-name {
-    .mat-checkbox-layout {
-        width: 100%;
-    }
-
-    .mat-checkbox-label {
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .mat-checkbox-inner-container {
-        margin: auto 8px auto 0;
-    }
-}
-
 @mixin adf-dialog-theme($theme) {
 
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
 
+    .adf-fill-remaining-space {
+        flex: 1 1 auto;
+    }
+
+    .adf-full-width {
+        width: 100%;
+    }
+
+    .adf-lock-file-name {
+        .mat-checkbox-layout {
+            width: 100%;
+        }
+
+        .mat-checkbox-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .mat-checkbox-inner-container {
+            margin: auto 8px auto 0;
+        }
+    }
+
     .adf-dialog-buttons button {
         text-transform: uppercase;
     }

lib/content-services/src/lib/dialogs/folder.dialog.ts

@@ -17,7 +17,7 @@
 
 import { Observable } from 'rxjs';
 
-import { Component, Inject, OnInit, Optional, EventEmitter, Output } from '@angular/core';
+import { Component, Inject, OnInit, Optional, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
@@ -28,8 +28,8 @@ import { forbidEndingDot, forbidOnlySpaces, forbidSpecialCharacters } from './fo
 
 @Component({
     selector: 'adf-folder-dialog',
-    styleUrls: ['./folder.dialog.scss'],
-    templateUrl: './folder.dialog.html'
+    templateUrl: './folder.dialog.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class FolderDialogComponent implements OnInit {
 

lib/content-services/src/lib/dialogs/node-lock.dialog.ts

@@ -17,7 +17,7 @@
 
 import moment from 'moment-es6';
 
-import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { Component, Inject, OnInit, Optional, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
@@ -26,8 +26,8 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-node-lock',
-    styleUrls: ['./folder.dialog.scss'],
-    templateUrl: './node-lock.dialog.html'
+    templateUrl: './node-lock.dialog.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class NodeLockDialogComponent implements OnInit {
 

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -154,7 +154,7 @@
             word-break: break-all;
             white-space: pre-line;
 
-            @media screen and ($mat-xsmall) {
+            @media screen and (max-width: 599px) {
                 font-size: 48px;
             }
         }
@@ -176,7 +176,7 @@
             object-fit: contain;
             margin-top: 17px;
 
-            @media screen and ($mat-xsmall) {
+            @media screen and (max-width: 599px) {
                 width: 250px;
             }
         }

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -65,7 +65,6 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-document-list',
-    styleUrls: ['./document-list.component.scss'],
     templateUrl: './document-list.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-document-list' }

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts

@@ -24,7 +24,6 @@ import { MemberModel } from '../../models/member.model';
 @Component({
     selector: 'adf-add-permission-dialog',
     templateUrl: './add-permission-dialog.component.html',
-    styleUrls: ['./add-permission-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AddPermissionDialogComponent {

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,9 +1,6 @@
 @mixin adf-add-permission-panel-theme($theme) {
-
-    $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
     $search-result-height: calc(100% - 75px);
 

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts

@@ -26,7 +26,6 @@ import { SearchComponent } from '../../../search/components/search.component';
 @Component({
     selector: 'adf-add-permission-panel',
     templateUrl: './add-permission-panel.component.html',
-    styleUrls: ['./add-permission-panel.component.scss'],
     encapsulation: ViewEncapsulation.None,
     providers: [
         { provide: SearchConfigurationService, useClass: SearchPermissionConfigurationService },

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts

@@ -24,7 +24,6 @@ import { RoleModel } from '../../models/role.model';
 @Component({
     selector: 'adf-add-permission',
     templateUrl: './add-permission.component.html',
-    styleUrls: ['./add-permission.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 /*

lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss

@@ -1,36 +1,32 @@
-@mixin adf-permission-container-theme($theme) {
-    $adf-permission-list-width: 100% !default;
+.adf-datatable-permission {
+    display: flex;
+    min-width: 450px;
+    width: 100%;
 
-    .adf-datatable-permission {
-        display: flex;
-        min-width: 450px;
-        width: $adf-permission-list-width;
+    &.adf-datatable {
+        overflow: hidden;
 
-        &.adf-datatable {
-            overflow: hidden;
+        .adf-delete-permission-column {
+            min-width: 80px;
 
-            .adf-delete-permission-column {
-                min-width: 80px;
-
-                .adf-cell-value {
-                    width: 80px;
-                    padding-right: 10px;
-                    place-content: flex-end;
-                }
+            .adf-cell-value {
+                width: 80px;
+                padding-right: 10px;
+                place-content: flex-end;
             }
+        }
 
-            .adf-authorityId-column {
-                flex: 40%;
-            }
+        .adf-authorityId-column {
+            flex: 40%;
+        }
 
-            .adf-authority-icon-column {
-                min-width: 40px;
-            }
+        .adf-authority-icon-column {
+            min-width: 40px;
+        }
 
-            .adf-datatable-selected > svg {
-                width: 40px;
-                height: 40px;
-            }
+        .adf-datatable-selected > svg {
+            width: 40px;
+            height: 40px;
         }
     }
 }

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -1,9 +1,5 @@
 @mixin adf-permission-list-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     .adf {
         &-permission-card {

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts

@@ -24,7 +24,6 @@ import { PermissionListService } from './permission-list.service';
 @Component({
     selector: 'adf-permission-list',
     templateUrl: './permission-list.component.html',
-    styleUrls: ['./permission-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class PermissionListComponent {

lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss

@@ -1,6 +1,5 @@
 @mixin adf-user-icon-column-theme($theme) {
     $primary: map-get($theme, primary);
-    $document-list-selection-color: mat-color($accent) !default;
 
     .adf {
         &-people-initial {
@@ -31,7 +30,7 @@
         &-people-select-icon {
             margin: 0 !important;
             svg {
-                fill: $document-list-selection-color;
+                fill: mat-color($accent);
                 width: 40px;
                 height: 40px;
             }

lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts

@@ -34,7 +34,6 @@ import { NodePermissionService } from '../../services/node-permission.service';
             <mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected"></mat-icon>
         </div>
     `,
-    styleUrls: ['./user-icon-column.component.scss'],
     host: { class: 'adf-user-icon-column adf-datatable-content-cell' }
 })
 export class UserIconColumnComponent implements OnInit {

lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss

@@ -1,5 +1,4 @@
 @mixin user-name-column-theme($theme) {
-    $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
 
     .adf-user {

lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts

@@ -32,8 +32,7 @@ import { EcmUserModel } from '@alfresco/adf-core';
             </span>
         </div>
     `,
-    host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' },
-    styleUrls: [ './user-name-column.component.scss' ]
+    host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' }
 })
 export class UserNameColumnComponent implements OnInit {
     @Input()

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts

@@ -21,7 +21,6 @@ import { SearchFilterComponent } from '../../components/search-filter/search-fil
 @Component({
     selector: 'adf-search-chip-list',
     templateUrl: './search-chip-list.component.html',
-    styleUrls: ['./search-chip-list.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-chip-list' }
 })

lib/content-services/src/lib/search/components/search-control.component.scss

@@ -1,8 +1,6 @@
 @mixin adf-search-control-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
     $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
     $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
@@ -29,7 +27,7 @@
             background-color: mat-color($background, card);
             border-radius: $mat-menu-border-radius;
 
-            @media screen and ($mat-small) {
+            @media screen and (max-width: 959px) {
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;

lib/content-services/src/lib/search/components/search-control.component.ts

@@ -27,7 +27,6 @@ import { EmptySearchResultComponent } from './empty-search-result.component';
 @Component({
     selector: 'adf-search-control',
     templateUrl: './search-control.component.html',
-    styleUrls: ['./search-control.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-control' }
 })

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts

@@ -39,7 +39,6 @@ import { MatMenuTrigger } from '@angular/material/menu';
 @Component({
     selector: 'adf-search-filter-container',
     templateUrl: './search-filter-container.component.html',
-    styleUrls: ['./search-filter-container.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class SearchFilterContainerComponent implements OnInit, OnDestroy {

lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts

@@ -35,7 +35,6 @@ export interface SelectedBucket {
 @Component({
     selector: 'adf-search-filter',
     templateUrl: './search-filter.component.html',
-    styleUrls: ['./search-filter.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-filter' }
 })

lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts

@@ -23,7 +23,6 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token';
 @Component({
     selector: 'adf-search-sorting-picker',
     templateUrl: './search-sorting-picker.component.html',
-    styleUrls: ['./search-sorting-picker.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-sorting-picker' }
 })

lib/content-services/src/lib/search/components/search.component.scss

@@ -1,19 +1,9 @@
-@mixin adf-search-autocomplete-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-    $mat-menu-border-radius: 2px !default;
+.adf {
+    &-search-hide {
+        visibility: hidden;
+    }
 
-    .adf {
-
-        &-search-hide {
-            visibility: hidden;
-        }
-
-        &-search-show {
-            visibility: visible;
-        }
+    &-search-show {
+        visibility: visible;
     }
 }

lib/content-services/src/lib/social/like.component.scss

@@ -1,11 +1,3 @@
-@mixin selected {
-    color: #2196f3;
-}
-
-@mixin unselected {
-    color: #808080;
-}
-
 .adf-like-container {
     display: flex;
     overflow: hidden;
@@ -24,17 +16,17 @@
 
     .adf-like-select {
         cursor: pointer;
-        @include selected;
+        color: #2196f3;
         &:hover {
-            @include unselected;
+            color: #808080;
         }
     }
 
     .adf-like-grey {
         cursor: pointer;
-        @include unselected;
+        color: #808080;
         &:hover {
-            @include selected;
+            color: #2196f3;
         }
     }
 

lib/content-services/src/lib/styles/_index.scss

@@ -8,7 +8,6 @@
 @import '../upload/components/file-uploading-dialog.component';
 @import '../upload/components/upload-drag-area.component';
 
-@import '../search/components/search.component';
 @import '../search/components/search-control.component';
 @import '../search/components/search-sorting-picker/search-sorting-picker.component';
 @import '../search/components/search-filter/search-filter.component';
@@ -24,12 +23,9 @@
 @import '../permission-manager/components/add-permission/add-permission.component';
 @import '../permission-manager/components/add-permission/add-permission-dialog.component';
 @import '../permission-manager/components/add-permission/add-permission-panel.component';
-@import '../tree-view/components/tree-view.component';
 @import '../version-manager/version-comparison.component';
 @import '../content-type/content-type-dialog.component';
 @import '../aspect-list/aspect-list.component';
-@import '../aspect-list/aspect-list-dialog.component';
-@import '../permission-manager/components/permission-container/permission-container.component';
 @import '../permission-manager/components/user-icon-column/user-icon-column.component';
 @import '../permission-manager/components/user-name-column/user-name-column.component';
 
@@ -44,24 +40,20 @@
     @include adf-upload-dialog-theme($theme);
     @include adf-upload-drag-area-theme($theme);
     @include adf-search-control-theme($theme);
-    @include adf-search-autocomplete-theme($theme);
     @include adf-search-sorting-picker-theme($theme);
     @include adf-filter-menu-theme($theme);
     @include adf-dialog-theme($theme);
     @include adf-content-node-selector-dialog-theme($theme);
     @include adf-content-metadata-module-theme($theme);
     @include adf-permission-list-theme($theme);
-    @include adf-permission-container-theme($theme);
     @include adf-user-icon-column-theme($theme);
     @include user-name-column-theme($theme);
     @include adf-add-permission-theme($theme);
     @include adf-add-permission-dialog-theme($theme);
     @include adf-add-permission-panel-theme($theme);
-    @include adf-tree-view-theme($theme);
     @include adf-search-filter-theme($theme);
     @include adf-search-chip-list-theme($theme);
     @include adf-version-comparison-theme($theme);
     @include adf-content-type-dialog-theme($theme);
     @include adf-aspect-list-theme($theme);
-    @include adf-aspect-list-dialog-theme($theme);
 }

lib/content-services/src/lib/tree-view/components/tree-view.component.scss

@@ -1,21 +1,15 @@
-@mixin adf-tree-view-theme($theme) {
-    $primary: map-get($theme, primary);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+.adf {
+    &-tree-view-icon {
+        color: #d9e022;
+    }
 
-    .adf {
-        &-tree-view-icon {
-            color: #d9e022;
-        }
+    &-tree-view-node.mat-tree-node {
+        min-height: 40px;
+        font-size: 12px;
+        align-items: baseline;
+    }
 
-        &-tree-view-node.mat-tree-node {
-            min-height: 40px;
-            font-size: 12px;
-            align-items: baseline;
-        }
-
-        &-tree-view-label {
-            cursor: pointer;
-        }
+    &-tree-view-label {
+        cursor: pointer;
     }
 }

lib/content-services/src/lib/tree-view/components/tree-view.component.ts

@@ -24,8 +24,8 @@ import { NodeEntry } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-tree-view-list',
-    templateUrl: 'tree-view.component.html',
-    styleUrls: ['tree-view.component.scss']
+    templateUrl: './tree-view.component.html',
+    styleUrls: ['./tree-view.component.scss']
 })
 
 export class TreeViewComponent implements OnChanges {

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts

@@ -24,8 +24,7 @@ import { takeUntil, delay } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-file-uploading-dialog',
-    templateUrl: './file-uploading-dialog.component.html',
-    styleUrls: ['./file-uploading-dialog.component.scss']
+    templateUrl: './file-uploading-dialog.component.html'
 })
 export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     /** Dialog direction. Can be 'ltr' or 'rtl. */

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts

@@ -20,8 +20,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'adf-file-uploading-list-row',
-    templateUrl: './file-uploading-list-row.component.html',
-    styleUrls: ['./file-uploading-list-row.component.scss']
+    templateUrl: './file-uploading-list-row.component.html'
 })
 export class FileUploadingListRowComponent {
     @Input()

lib/content-services/src/lib/upload/components/upload-drag-area.component.ts

@@ -25,7 +25,6 @@ import { UploadBase } from './base-upload/upload-base';
 @Component({
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
-    styleUrls: ['./upload-drag-area.component.scss'],
     host: {'class': 'adf-upload-drag-area'},
     viewProviders: [
         {provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}

lib/content-services/src/lib/version-manager/version-comparison.component.ts

@@ -21,8 +21,7 @@ import { ThumbnailService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-version-comparison',
-    templateUrl: './version-comparison.component.html',
-    styleUrls: ['./version-comparison.component.scss']
+    templateUrl: './version-comparison.component.html'
 })
 export class VersionComparisonComponent {
 

lib/content-services/src/lib/webscript/webscript.component.ts

@@ -40,7 +40,7 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
  */
 @Component({
     selector: 'adf-webscript-get',
-    templateUrl: 'webscript.component.html'
+    templateUrl: './webscript.component.html'
 })
 export class WebscriptComponent implements OnChanges {
 

lib/core/buttons-menu/buttons-menu.component.scss

@@ -1,32 +1,29 @@
-@mixin adf-buttons-menu-theme($theme) {
+.adf-buttons-menu {
+    margin-right: 10px;
 
-    .adf-buttons-menu {
+    & div {
+        display: flex;
+    }
+
+    &-mobile {
         margin-right: 10px;
+    }
 
-        & div {
-            display: flex;
+    &-desktop {
+        display: flex;
+
+        button {
+            color: black;
+            padding: 0;
         }
 
-        &-mobile {
-            margin-right: 10px;
+        button > span {
+            display: none;
         }
 
-        &-desktop {
-            display: flex;
-
-            button {
-                color: black;
-                padding: 0;
-            }
-
-            button > span {
-                display: none;
-            }
-
-            button > mat-icon.mat-icon.material-icons {
-                color: black;
-                margin: 0 10px;
-            }
+        button > mat-icon.mat-icon.material-icons {
+            color: black;
+            margin: 0 10px;
         }
     }
 }

lib/core/buttons-menu/buttons-menu.component.ts

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import { Component, ContentChildren, QueryList, AfterContentInit, ViewEncapsulation } from '@angular/core';
 import { MatMenuItem } from '@angular/material/menu';
 
 @Component({
     selector: 'adf-buttons-action-menu',
     templateUrl: './buttons-menu.component.html',
-    styleUrls: ['./buttons-menu.component.scss']
+    styleUrls: ['./buttons-menu.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 
 export class ButtonsMenuComponent implements  AfterContentInit {

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-card-view-array-item-theme($theme) {
     $foreground: map-get($theme, foreground);
 

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -22,8 +22,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
   selector: 'adf-card-view-arrayitem',
-  templateUrl: './card-view-arrayitem.component.html',
-  styleUrls: ['./card-view-arrayitem.component.scss']
+  templateUrl: './card-view-arrayitem.component.html'
 })
 export class CardViewArrayItemComponent extends BaseCardView<CardViewArrayItemModel> {
 

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.scss

@@ -1,2 +0,0 @@
-.adf {
-}

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts

@@ -23,8 +23,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
     selector: 'adf-card-view-boolitem',
-    templateUrl: './card-view-boolitem.component.html',
-    styleUrls: ['./card-view-boolitem.component.scss']
+    templateUrl: './card-view-boolitem.component.html'
 })
 
 export class CardViewBoolItemComponent extends BaseCardView<CardViewBoolItemModel> {

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -41,8 +41,7 @@ import { TranslationService } from '../../../services/translation.service';
         { provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
     ],
     selector: 'adf-card-view-dateitem',
-    templateUrl: './card-view-dateitem.component.html',
-    styleUrls: ['./card-view-dateitem.component.scss']
+    templateUrl: './card-view-dateitem.component.html'
 })
 export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemModel> implements OnInit, OnDestroy {
 

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts

@@ -24,8 +24,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
     selector: 'adf-card-view-boolitem',
-    templateUrl: './card-view-keyvaluepairsitem.component.html',
-    styleUrls: ['./card-view-keyvaluepairsitem.component.scss']
+    templateUrl: './card-view-keyvaluepairsitem.component.html'
 })
 
 export class CardViewKeyValuePairsItemComponent extends BaseCardView<CardViewKeyValuePairsItemModel> implements OnChanges {

lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts

@@ -24,7 +24,6 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'adf-select-filter-input',
     templateUrl: './select-filter-input.component.html',
-    styleUrls: ['./select-filter-input.component.scss'],
     host: { 'class': 'adf-select-filter-input' },
     encapsulation: ViewEncapsulation.None
 })

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -1,5 +1,3 @@
-@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;

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -38,8 +38,7 @@ const templateTypes = {
 
 @Component({
     selector: 'adf-card-view-textitem',
-    templateUrl: './card-view-textitem.component.html',
-    styleUrls: ['./card-view-textitem.component.scss']
+    templateUrl: './card-view-textitem.component.html'
 })
 export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemModel> implements OnChanges {
 

lib/core/card-view/components/card-view/card-view.component.scss

@@ -1,7 +1,4 @@
-@import '~@angular/material/theming';
-
 @mixin adf-card-view-theme($theme) {
-    $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
 
     .adf-property-list {

lib/core/card-view/components/card-view/card-view.component.ts

@@ -21,8 +21,7 @@ import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.comp
 
 @Component({
     selector: 'adf-card-view',
-    templateUrl: './card-view.component.html',
-    styleUrls: ['./card-view.component.scss']
+    templateUrl: './card-view.component.html'
 })
 export class CardViewComponent {
     /** (**required**) Items to show in the card view. */

lib/core/clipboard/clipboard.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-clipboard-theme($theme) {
     $primary: map-get($theme, primary);
     $config: mat-typography-config();

lib/core/clipboard/clipboard.directive.ts

@@ -78,10 +78,7 @@ export class ClipboardDirective {
 
 @Component({
     selector: 'adf-copy-content-tooltip',
-    template: `
-        <span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>
-        `,
-    styleUrls: ['./clipboard.component.scss'],
+    template: `<span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>`,
     encapsulation: ViewEncapsulation.None
 })
 export class ClipboardComponent implements OnInit {

lib/core/comments/comment-list.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-task-list-comment-list-theme($theme) {
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);

lib/core/comments/comment-list.component.ts

@@ -26,7 +26,6 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'adf-comment-list',
     templateUrl: './comment-list.component.html',
-    styleUrls: ['./comment-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 

lib/core/comments/comments.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-task-list-comment-theme($theme) {
     $foreground: map-get($theme, foreground);
     $header-border: 1px solid mat-color($foreground, divider);

lib/core/comments/comments.component.ts

@@ -24,8 +24,7 @@ import { share } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-comments',
-    templateUrl: './comments.component.html',
-    styleUrls: ['./comments.component.scss']
+    templateUrl: './comments.component.html'
 })
 export class CommentsComponent implements OnChanges {
 

lib/core/datatable/components/datatable/datatable.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-datatable-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);

lib/core/datatable/components/datatable/datatable.component.ts

@@ -51,7 +51,6 @@ export enum ShowHeaderMode {
 
 @Component({
     selector: 'adf-datatable',
-    styleUrls: ['./datatable.component.scss'],
     templateUrl: './datatable.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-datatable' }

lib/core/dialogs/edit-json/edit-json.dialog.ts

@@ -25,8 +25,8 @@ export interface EditJsonDialogSettings {
 }
 
 @Component({
-    templateUrl: 'edit-json.dialog.html',
-    styleUrls: ['edit-json.dialog.scss'],
+    templateUrl: './edit-json.dialog.html',
+    styleUrls: ['./edit-json.dialog.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-edit-json-dialog' }
 })

lib/core/directives/tooltip-card/tooltip-card.component.scss

@@ -1,8 +1,5 @@
-@import '~@angular/material/theming';
-
 @mixin adf-tooltip-card-directive($theme) {
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 

lib/core/directives/tooltip-card/tooltip-card.component.ts

@@ -20,7 +20,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
     selector: 'adf-tooltip-card-component',
-    styleUrls: ['./tooltip-card.component.scss'],
     templateUrl: './tooltip-card.component.html',
     animations: [
         trigger('tooltip', [

lib/core/form/components/form-list.component.ts

@@ -21,7 +21,6 @@ import { FormService } from './../services/form.service';
 @Component({
     selector: 'adf-form-list',
     templateUrl: './form-list.component.html',
-    styleUrls: ['./form-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FormListComponent implements OnChanges {

lib/core/form/components/form-renderer.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-form-renderer-theme($theme) {
 
     $config: mat-typography-config();

lib/core/form/components/form-renderer.component.ts

@@ -21,7 +21,6 @@ import { FormModel } from './widgets/core/form.model';
 @Component({
     selector: 'adf-form-renderer',
     templateUrl: './form-renderer.component.html',
-    styleUrls: ['./form-renderer.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FormRendererComponent {

lib/core/form/components/widgets/amount/amount.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 @mixin adf-amount-widget-theme($theme) {
     $foreground: map-get($theme, foreground);
 

lib/core/form/components/widgets/amount/amount.widget.ts

@@ -30,7 +30,6 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
 @Component({
     selector: 'amount-widget',
     templateUrl: './amount.widget.html',
-    styleUrls: ['./amount.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/form/components/widgets/container/container.widget.scss

@@ -1,9 +1,5 @@
-@import '~@angular/material/theming';
-
 @mixin adf-form-container-widget-theme($theme) {
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
 
     .adf-hidden {
         display: none;
@@ -66,7 +62,7 @@
             padding-right: 3px;
         }
 
-        @media screen and ($mat-small) {
+        @media screen and (max-width: 959px) {
             .adf-grid-list-item {
                 flex: 1 0 100%;
             }

lib/core/form/components/widgets/container/container.widget.ts

@@ -26,7 +26,6 @@ import { ContainerWidgetComponentModel } from './container.widget.model';
 @Component({
     selector: 'container-widget',
     templateUrl: './container.widget.html',
-    styleUrls: ['./container.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/form/components/widgets/date-time/date-time.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
     &-date-time-widget {
         .mat-form-field-suffix {

lib/core/form/components/widgets/date/date.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
     &-date-widget {
         .mat-form-field-suffix {

lib/core/form/components/widgets/document/document.widget.ts

@@ -21,7 +21,7 @@ import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'adf-form-document-widget',
-    templateUrl: 'document.widget.html',
+    templateUrl: './document.widget.html',
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/form/components/widgets/dropdown/dropdown.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
     &-dropdown-widget {
         width: 100%;

lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss

@@ -1,6 +1,3 @@
-@import '~@angular/material/theming';
-@import '../form';
-
 @mixin adf-dynamic-table-theme($theme) {
     $foreground: map-get($theme, foreground);
     $dynamic-table-font-size: 14px !default;

lib/core/form/components/widgets/file-viewer/file-viewer.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 file-viewer-widget {
     height: 100%;
     width: 100%;

lib/core/form/components/widgets/form.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-form-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);

lib/core/form/components/widgets/functional-group/functional-group.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
 
     &-group-widget {

lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-hyperlink-widget-theme($theme) {
     $primary: map-get($theme, primary);
 

lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts

@@ -25,7 +25,6 @@ import { FormFieldModel } from '../core';
 @Component({
     selector: 'hyperlink-widget',
     templateUrl: './hyperlink.widget.html',
-    styleUrls: ['./hyperlink.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/form/components/widgets/number/number.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
     &-number-widget {
         width: 100%;

lib/core/form/components/widgets/people/people.widget.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-form-people-widget-theme($theme) {
     $primary: map-get($theme, primary);
     $background: map-get($theme, background);

lib/core/form/components/widgets/people/people.widget.ts

@@ -36,7 +36,6 @@ import {
 @Component({
     selector: 'people-widget',
     templateUrl: './people.widget.html',
-    styleUrls: ['./people.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
 
     &-radio-button-container {

lib/core/form/components/widgets/text/text.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
     &-text-widget {
         width: 100%;

lib/core/form/components/widgets/typeahead/typeahead.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
 
     &-typeahead-widget-container {

lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss

@@ -1,6 +1,3 @@
-@import '../form';
-
-
 .adf {
 
     &-upload-folder-widget {

lib/core/form/components/widgets/upload/upload.widget.scss

@@ -1,5 +1,3 @@
-@import '../form';
-
 .adf {
 
     &-upload-widget-container {

lib/core/info-drawer/info-drawer-layout.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-info-drawer-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);