[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/process-services/src/lib/app-list/apps-list.component.ts

@@ -24,8 +24,7 @@ import { share, takeUntil, finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-apps',
-    templateUrl: 'apps-list.component.html',
-    styleUrls: ['./apps-list.component.scss']
+    templateUrl: './apps-list.component.html'
 })
 export class AppsListComponent implements OnInit, AfterContentInit, OnDestroy {
 

lib/process-services/src/lib/app-list/select-apps-dialog.component.ts

@@ -21,7 +21,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector: 'adf-select-apps-dialog',
-    templateUrl: 'select-apps-dialog.component.html'
+    templateUrl: './select-apps-dialog.component.html'
 })
 export class SelectAppsDialogComponent {
 

lib/process-services/src/lib/attachment/process-attachment-list.component.scss

@@ -1,52 +1,49 @@
-@mixin adf-process-attachment-list-theme($theme) {
+.adf-data-cell {
+    cursor: pointer !important;
+}
 
-    .adf-data-cell {
-        cursor: pointer !important;
-    }
+.adf-attachment-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
+}
 
-    .adf-attachment-list-loading-margin {
-        margin-left: calc((100% - 100px) / 2);
-        margin-right: calc((100% - 100px) / 2);
-    }
+.adf-empty-list-header {
+    height: 32px;
+    opacity: 0.26 !important;
+    font-size: 24px;
+    line-height: 1.33;
+    letter-spacing: -1px;
+}
 
-    .adf-empty-list-header {
-        height: 32px;
-        opacity: 0.26 !important;
-        font-size: 24px;
-        line-height: 1.33;
-        letter-spacing: -1px;
-    }
+.adf-empty-list-drag_drop {
+    min-height: 56px;
+    opacity: 0.54;
+    font-size: 56px;
+    line-height: 1;
+    letter-spacing: -2px;
+    margin-top: 40px !important;
+    word-break: break-all;
+    white-space: pre-line;
+}
 
-    .adf-empty-list-drag_drop {
-        min-height: 56px;
-        opacity: 0.54;
-        font-size: 56px;
-        line-height: 1;
-        letter-spacing: -2px;
-        margin-top: 40px !important;
-        word-break: break-all;
-        white-space: pre-line;
-    }
+.adf-empty-list__any-files-here-to-add {
+    min-height: 24px;
+    opacity: 0.54;
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: -0.4px;
+    margin-top: 17px;
+    word-break: break-all;
+    white-space: pre-line;
+}
 
-    .adf-empty-list__any-files-here-to-add {
-        min-height: 24px;
-        opacity: 0.54;
-        font-size: 16px;
-        line-height: 1.5;
-        letter-spacing: -0.4px;
-        margin-top: 17px;
-        word-break: break-all;
-        white-space: pre-line;
-    }
+.adf-empty-list__empty_doc_lib {
+    width: 565px;
+    height: 161px;
+    object-fit: contain;
+    margin-top: 17px;
 
-    .adf-empty-list__empty_doc_lib {
-        width: 565px;
-        height: 161px;
-        object-fit: contain;
-        margin-top: 17px;
-
-        @media screen and ($mat-xsmall) {
-            width: 250px;
-        }
+    @media screen and (max-width: 599px) {
+        width: 250px;
     }
 }

lib/process-services/src/lib/attachment/task-attachment-list.component.scss

@@ -1,58 +1,54 @@
-@mixin adf-task-attachment-list-theme($theme) {
+adf-datatable .adf-data-cell {
+    cursor: pointer !important;
+}
 
+.adf-attachment-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
+}
 
-    adf-datatable .adf-data-cell {
-        cursor: pointer !important;
-    }
+.adf-empty-list-header {
+    height: 32px;
+    opacity: 0.26;
+    font-size: 24px;
+    line-height: 1.33;
+    letter-spacing: -1px;
+}
 
-    .adf-attachment-list-loading-margin {
-        margin-left: calc((100% - 100px) / 2);
-        margin-right: calc((100% - 100px) / 2);
-    }
+.adf-empty-list-drag_drop {
+    min-height: 56px;
+    opacity: 0.54;
+    font-size: 56px;
+    line-height: 1;
+    letter-spacing: -2px;
+    margin-top: 40px;
+    word-break: break-all;
+    white-space: pre-line;
 
-    .adf-empty-list-header {
-        height: 32px;
-        opacity: 0.26;
-        font-size: 24px;
-        line-height: 1.33;
-        letter-spacing: -1px;
-    }
-
-    .adf-empty-list-drag_drop {
-        min-height: 56px;
-        opacity: 0.54;
-        font-size: 56px;
-        line-height: 1;
-        letter-spacing: -2px;
-        margin-top: 40px;
-        word-break: break-all;
-        white-space: pre-line;
-
-        @media screen and ($mat-xsmall) {
-            font-size: 40px;
-        }
-    }
-
-    .adf-empty-list__any-files-here-to-add {
-        min-height: 24px;
-        opacity: 0.54;
-        font-size: 16px;
-        line-height: 1.5;
-        letter-spacing: -0.4px;
-        margin-top: 17px;
-        word-break: break-all;
-        white-space: pre-line;
-    }
-
-    .adf-empty-list__empty_doc_lib {
-        width: 565px;
-        max-width: 100%;
-        height: 161px;
-        object-fit: contain;
-        margin-top: 17px;
-
-        @media screen and ($mat-xsmall) {
-            width: 250px;
-        }
+    @media screen and (max-width: 599px) {
+        font-size: 40px;
+    }
+}
+
+.adf-empty-list__any-files-here-to-add {
+    min-height: 24px;
+    opacity: 0.54;
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: -0.4px;
+    margin-top: 17px;
+    word-break: break-all;
+    white-space: pre-line;
+}
+
+.adf-empty-list__empty_doc_lib {
+    width: 565px;
+    max-width: 100%;
+    height: 161px;
+    object-fit: contain;
+    margin-top: 17px;
+
+    @media screen and (max-width: 599px) {
+        width: 250px;
     }
 }

lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts

@@ -25,7 +25,6 @@ import { Node } from '@alfresco/js-api';
 @Component({
     selector: 'adf-attach-file-widget-dialog',
     templateUrl: './attach-file-widget-dialog.component.html',
-    styleUrls: ['./attach-file-widget-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None,
     providers: [
         AuthenticationService,

lib/process-services/src/lib/form/start-form.component.ts

@@ -34,7 +34,6 @@ import { ContentLinkModel, FormService, WidgetVisibilityService, FormOutcomeMode
 @Component({
     selector: 'adf-start-form',
     templateUrl: './start-form.component.html',
-    styleUrls: ['./start-form.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {

lib/process-services/src/lib/people/components/people-list/people-list.component.scss

@@ -1,9 +1,5 @@
-@mixin  adf-task-people-list-theme($theme) {
-
-    .adf-task-people-list {
-        .adf-datatable-list {
-            width: 100%;
-        }
+.adf-task-people-list {
+    .adf-datatable-list {
+        width: 100%;
     }
-
 }

lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts

@@ -26,7 +26,6 @@ import { getDisplayUser } from '../../helpers/get-display-user';
 @Component({
     selector: 'adf-people-search-field',
     templateUrl: './people-search-field.component.html',
-    styleUrls: ['./people-search-field.component.scss'],
     host: { 'class': 'adf-people-search-field' },
     encapsulation: ViewEncapsulation.None
 })

lib/process-services/src/lib/people/components/people-search/people-search.component.ts

@@ -24,7 +24,6 @@ import { map } from 'rxjs/operators';
 @Component({
     selector: 'adf-people-search',
     templateUrl: './people-search.component.html',
-    styleUrls: ['./people-search.component.scss'],
     host: {
         'class': 'adf-people-search'
     },

lib/process-services/src/lib/people/components/people-selector/people-selector.component.scss

@@ -1,21 +1,15 @@
-@mixin adf-task-list-people-selector-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
+.adf-people-selector {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
 
-    .adf-people-selector {
-        display: flex;
-        flex-flow: row;
-        justify-content: space-between;
+    &-field {
+        flex: 1 1 auto;
+    }
 
-        &-field {
-            flex: 1 1 auto;
-        }
-
-        &-deselect {
-            flex: 0 0 auto;
-            top: 5px;
-            right: 5px;
-        }
+    &-deselect {
+        flex: 0 0 auto;
+        top: 5px;
+        right: 5px;
     }
 }

lib/process-services/src/lib/people/components/people/people.component.ts

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

lib/process-services/src/lib/people/people.module.scss

@@ -1,13 +1,9 @@
 @import './components/people-search/people-search.component';
 @import './components/people-search-field/people-search-field.component';
 @import './components/people/people.component';
-@import './components/people-selector/people-selector.component';
-@import './components/people-list/people-list.component';
 
 @mixin adf-people-module-theme($theme) {
-    @include adf-task-list-people-selector-theme($theme);
     @include adf-task-list-people-search-theme($theme);
     @include adf-task-list-people-search-field-theme($theme);
     @include adf-task-list-people-theme($theme);
-    @include adf-task-people-list-theme($theme);
 }

lib/process-services/src/lib/process-comments/process-comments.component.ts

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

lib/process-services/src/lib/process-list/components/process-filters.component.ts

@@ -25,8 +25,7 @@ import { IconModel } from '../../app-list/icon.model';
 
 @Component({
     selector: 'adf-process-instance-filters',
-    templateUrl: './process-filters.component.html',
-    styleUrls: ['process-filters.component.scss']
+    templateUrl: './process-filters.component.html'
 })
 export class ProcessFiltersComponent implements OnInit, OnChanges {
 

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

@@ -1,6 +1,4 @@
 @import '../process-list/components/process-filters.component';
-@import '../attachment/process-attachment-list.component';
-@import '../attachment/task-attachment-list.component';
 @import '../process-comments/process-comments.component';
 @import '../people/people.module';
 @import '../task-list/components/start-task.component';
@@ -20,8 +18,6 @@
     @include adf-people-module-theme($theme);
     @include adf-task-list-filters-task-theme($theme);
     @include adf-task-list-header-theme($theme);
-    @include adf-process-attachment-list-theme($theme);
-    @include adf-task-attachment-list-theme($theme);
     @include adf-apps-theme($theme);
     @include adf-task-standalone-component-theme($theme);
     @include adf-attach-file-widget-dialog-component-theme($theme);

lib/process-services/src/lib/task-list/components/start-task.component.ts

@@ -33,7 +33,6 @@ import { FormBuilder, AbstractControl, Validators, FormGroup, FormControl } from
 @Component({
     selector: 'adf-start-task',
     templateUrl: './start-task.component.html',
-    styleUrls: ['./start-task.component.scss'],
     providers: [
         { provide: DateAdapter, useClass: MomentDateAdapter },
         { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],

lib/process-services/src/lib/task-list/components/task-filters.component.ts

@@ -25,8 +25,7 @@ import { IconModel } from '../../app-list/icon.model';
 
 @Component({
     selector: 'adf-task-filters',
-    templateUrl: './task-filters.component.html',
-    styleUrls: ['task-filters.component.scss']
+    templateUrl: './task-filters.component.html'
 })
 export class TaskFiltersComponent implements OnInit, OnChanges {
 

lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts

@@ -32,8 +32,7 @@ import { Observable } from 'rxjs';
 
 @Component({
   selector: 'adf-task-form',
-  templateUrl: './task-form.component.html',
-  styleUrls: ['./task-form.component.scss']
+  templateUrl: './task-form.component.html'
 })
 export class TaskFormComponent implements OnInit {
 

lib/process-services/src/lib/task-list/components/task-header.component.scss

@@ -29,7 +29,7 @@
 
     }
 
-    @media screen and  ($mat-small) {
+    @media screen and  (max-width: 959px) {
         adf-card-view .adf-property-value {
             text-overflow: ellipsis;
             overflow: hidden;

lib/process-services/src/lib/task-list/components/task-header.component.ts

@@ -32,8 +32,7 @@ import { TaskDescriptionValidator } from '../validators/task-description.validat
 
 @Component({
     selector: 'adf-task-header',
-    templateUrl: './task-header.component.html',
-    styleUrls: ['./task-header.component.scss']
+    templateUrl: './task-header.component.html'
 })
 export class TaskHeaderComponent implements OnChanges, OnInit {
 

lib/process-services/src/lib/task-list/components/task-standalone.component.ts

@@ -20,7 +20,6 @@ import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angu
 @Component({
     selector: 'adf-task-standalone',
     templateUrl: './task-standalone.component.html',
-    styleUrls: ['./task-standalone.component.scss'],
     encapsulation: ViewEncapsulation.None
 })