[AAE-16369] use layout-bp mixin where applicable (#8945)

* [AAE-15828] layout-bp mixin for core

* [AAE-15828] fixed import

* [AAE-15828] layout-bp for process-services-cloud

* [AAE-15828] layout-bp for process-services

* [AAE-15828] layout-bp for content-services

* [AAE-15828] fixed incorrect values

* [AAE-15828] lint fix

* configure stylePreprocessorOptions for cross project scss importing

* scss import cardio

* set correct style paths for packages

* [AAE-16369] addded missing test config

* [ci:force] fix for the pretheme build

* unified configs for libs

angular.json

@@ -29,7 +29,7 @@
             "polyfills": "demo-shell/src/polyfills.ts",
             "stylePreprocessorOptions": {
               "includePaths": [
-                "lib"
+                "lib", "lib/core/src/lib"
               ]
             },
             "assets": [
@@ -272,6 +272,11 @@
             "karmaConfig": "lib/core/karma.conf.js",
             "sourceMap": true,
             "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
               "demo-shell/src/styles.scss"
             ]
@@ -307,7 +312,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -328,7 +338,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -378,10 +393,15 @@
                 "command": "npm publish --tag {args.tag}",
                 "forwardAllArgs": true
               }
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
             }
           }
         }
+      }
     },
     "content-services": {
       "root": "lib/content-services",
@@ -410,7 +430,12 @@
             "tsConfig": "lib/content-services/tsconfig.spec.json",
             "karmaConfig": "lib/content-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -435,7 +460,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -456,7 +486,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -518,7 +553,12 @@
             "tsConfig": "lib/process-services/tsconfig.spec.json",
             "karmaConfig": "lib/process-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -584,7 +624,12 @@
             "tsConfig": "lib/process-services-cloud/tsconfig.spec.json",
             "karmaConfig": "lib/process-services-cloud/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -609,7 +654,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -630,7 +680,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {
@@ -703,7 +758,12 @@
             "tsConfig": "lib/insights/tsconfig.spec.json",
             "karmaConfig": "lib/insights/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -768,7 +828,12 @@
             "tsConfig": "lib/extensions/tsconfig.spec.json",
             "karmaConfig": "lib/extensions/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -816,7 +881,12 @@
                 "entryName": "shared",
                 "entryPath": "/lib/testing/src/lib/shared/index.ts"
               }
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "production": {
@@ -897,7 +967,12 @@
             "outputPath": "dist/libs/eslint-plugin-eslint-angular",
             "main": "lib/eslint-angular/index.ts",
             "generatePackageJson" : true,
-            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json"
+            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -956,7 +1031,12 @@
           "options": {
             "commands": [
               "cd lib/cli && npm i && npm run dist"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "production": {
@@ -1032,6 +1112,11 @@
             "browserTarget": "stories:storybook",
             "configDir": "lib/stories/.storybook",
             "compodoc": false,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
               "demo-shell/src/assets/fonts/muli/muli.css",
               "demo-shell/src/styles.scss",
@@ -1059,7 +1144,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
               ]
+            }
           },
           "configurations": {
             "ci": {

lib/config/webpack.style.js

@@ -41,5 +41,11 @@ module.exports = {
         new DisableOutputWebpackPlugin({
             test: /\.js$/,
         })
-    ]
+    ],
+
+    resolve: {
+        alias: {
+            'styles': path.resolve(__dirname, '../core/src/lib/styles'),
+        }
+    }
 };

lib/content-services/ng-package.json

@@ -20,6 +20,9 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-content-services"
+    "flatModuleFile": "adf-content-services",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   }
 }

lib/content-services/src/lib/content-user-info/content-user-info.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-userinfo-container {
         display: flex;
@@ -12,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: none;
         }
     }
@@ -90,7 +92,7 @@
         display: flex;
         justify-content: space-between;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             padding: 10px;
         }
     }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-document-list {
     min-height: 0;
     height: 100%;
@@ -141,7 +143,7 @@
         word-break: break-all;
         white-space: pre-line;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             font-size: 48px;
         }
     }
@@ -163,12 +165,12 @@
         object-fit: contain;
         margin-top: 17px;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             width: 250px;
         }
     }
 
-    @media screen and (max-width: 960px) {
+    @include layout-bp(lt-md) {
         &-drag-drop,
         &-any-files-here-to-add {
             display: none;

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

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@import 'styles/flex';
 
 $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
 $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
@@ -23,7 +24,7 @@ $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
         background-color: var(--adf-theme-background-card-color);
         border-radius: 2px;
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;

lib/core/ng-package.json

@@ -35,7 +35,10 @@
   ],
   "lib": {
     "entryFile": "./src/public-api.ts",
-    "flatModuleFile": "adf-core"
+    "flatModuleFile": "adf-core",
+    "styleIncludePaths": [
+      "./src/lib"
+    ]
   },
   "allowedNonPeerDependencies": [
     "cropperjs",

lib/core/shell/ng-package.json

@@ -1,6 +1,9 @@
 {
-  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
-    "entryFile": "src/index.ts"
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": [
+      "../src/lib"
+    ]
   }
 }

lib/core/shell/src/lib/components/shell/shell.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .app-shell {
     display: flex;
     flex-direction: column;
@@ -21,7 +23,7 @@
     }
 }
 
-@media screen and (max-width: 599px) {
+@include layout-bp(lt-sm) {
     .adf-app-title {
         display: none;
     }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-hidden {
     display: none;
 }
@@ -22,7 +24,7 @@
 
 .adf-container-widget {
     .adf-grid-list-column-view {
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: flow;
         }
 
@@ -56,7 +58,7 @@
         padding-right: 3px;
     }
 
-    @media screen and (max-width: 959px) {
+    @include layout-bp(lt-md) {
         .adf-grid-list-item {
             flex: 1 0 100%;
         }

lib/core/src/lib/identity-user-info/identity-user-info.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-userinfo-container {
         display: flex;
@@ -11,8 +13,7 @@
 
     &-userinfo-name {
         padding: 0 5px;
-
+        @include layout-bp(lt-md) {
-        @media screen and (max-width: 959px) {
             display: none;
         }
     }
@@ -78,7 +79,7 @@
         display: flex;
         flex-direction: column;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             padding: 10px;
         }
     }

lib/core/src/lib/layout/components/header/header.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 adf-layout-header .mat-toolbar-single-row {
     color: var(--theme-header-text-color) !important;
     background-color: var(--theme-primary-color);
@@ -50,7 +52,7 @@ adf-layout-header .mat-toolbar-single-row {
         padding: 0;
     }
 
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         .adf-app-logo,
         .adf-app-title {
             display: none;

lib/core/src/lib/styles/_default-class.scss

@@ -1,11 +1,13 @@
+@import './flex';
+
 .adf-hide-small {
-    @media screen and (max-width: 959px) {
+    @include layout-bp(lt-md) {
         display: none !important;
     }
 }
 
 .adf-hide-xsmall {
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         display: none !important;
     }
 }

lib/core/src/lib/templates/error-content/error-content.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-error-content {
     color: var(--adf-theme-foreground-text-color-054);
     display: flex;
@@ -30,5 +32,28 @@
         width: 50%;
         min-width: 250px;
         margin-bottom: 60px;
+        line-height: 30px;
+    }
+}
+
+@include layout-bp(lt-md) {
+    .adf-error-content {
+        &-code {
+            margin-top: 100px;
+            font-size: 50px;
+            margin-bottom: 25px;
+        }
+
+        &-shadow {
+            width: 100px;
+        }
+
+        &-title {
+            font-size: var(--theme-headline-font-size);
+        }
+
+        &-description {
+            font-size: var(--theme-subheading-2-font-size);
+        }
     }
 }

lib/extensions/ng-package.json

@@ -4,6 +4,9 @@
   "deleteDestPath": false,
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-extensions"
+    "flatModuleFile": "adf-extensions",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   }
 }

lib/insights/ng-package.json

@@ -15,6 +15,9 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-insights"
+    "flatModuleFile": "adf-insights",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   }
 }

lib/process-services-cloud/ng-package.json

@@ -21,7 +21,10 @@
 
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-process-services-cloud"
+    "flatModuleFile": "adf-process-services-cloud",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   },
   "allowedNonPeerDependencies": [
     "@apollo/client",

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 adf-cloud-app-list {
     width: 100%;
 
@@ -27,11 +29,11 @@ adf-cloud-app-list {
             flex: 1 1 100%;
             max-width: 33.3333%;
 
-            @media screen and (max-width: 960px) {
+            @include layout-bp(lt-md) {
                 max-width: 50%;
             }
 
-            @media screen and (max-width: 600px) {
+            @include layout-bp(lt-sm) {
                 max-width: 100%;
             }
         }

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-edit-process-filter-date-error-container {
     position: absolute;
     height: 20px;
@@ -48,7 +50,7 @@
             max-width: 23%;
         }
 
-        @media screen and (max-width: 600px) {
+        @include layout-bp(lt-sm) {
             flex-flow: column;
 
             :not(:last-child) {

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-cloud-start-task-heading {
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
     margin-bottom: 10px;
@@ -83,7 +85,7 @@ adf-cloud-start-task {
                 }
             }
 
-            @media screen and (max-width: 960px) {
+            @include layout-bp(lt-md) {
                 flex-direction: column;
 
                 mat-form-field,

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-edit-task-filter-checkbox {
     font-size: var(--theme-subheading-2-font-size);
     padding-top: 10px;
@@ -58,7 +60,7 @@
             flex: 1 1 23%;
         }
 
-        @media screen and (max-width: 600px) {
+        @include layout-bp(lt-sm) {
             flex-flow: column;
 
             :not(:last-child) {

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-controls {
         display: flex;
@@ -26,7 +28,7 @@
     }
 }
 
-@media screen and (max-width: 959px) {
+@include layout-bp(lt-md) {
     adf-card-view .adf-property-value {
         text-overflow: ellipsis;
         overflow: hidden;

lib/process-services/ng-package.json

@@ -20,6 +20,9 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-process-services"
+    "flatModuleFile": "adf-process-services",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   }
 }

lib/process-services/src/lib/app-list/apps-list.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 /* stylelint-disable scss/no-global-function-names */
 @mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
     position: relative;
@@ -66,12 +68,12 @@ $tile-themes: (
             flex: 1 1 33.3333%;
             max-width: 33.3333%;
 
-            @media screen and (max-width: 960px) {
+            @include layout-bp(lt-md) {
                 flex: 1 1 50%;
                 max-width: 50%;
             }
 
-            @media screen and (max-width: 600px) {
+            @include layout-bp(lt-sm) {
                 flex: 1 1 100%;
                 max-width: 100%;
             }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-data-cell {
     cursor: pointer !important;
 }
@@ -43,7 +45,7 @@
     object-fit: contain;
     margin-top: 17px;
 
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         width: 250px;
     }
 }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 adf-datatable .adf-data-cell {
     cursor: pointer !important;
 }
@@ -25,7 +27,7 @@ adf-datatable .adf-data-cell {
     word-break: break-all;
     white-space: pre-line;
 
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         font-size: 40px;
     }
 }
@@ -48,7 +50,7 @@ adf-datatable .adf-data-cell {
     object-fit: contain;
     margin-top: 17px;
 
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         width: 250px;
     }
 }

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-attach-widget-container {
         margin-bottom: 15px;
@@ -72,7 +74,7 @@
             max-width: 200px;
         }
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             .mat-list-text {
                 max-width: 150px;
             }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-start-process {
         width: 96%;
@@ -71,7 +73,7 @@
     }
 }
 
-@media (max-width: 600px) {
+@include layout-bp(lt-sm) {
     .adf-start-process {
         width: 90%;
         margin-left: auto;

lib/process-services/src/lib/process-user-info/process-user-info.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-userinfo-container {
         display: flex;
@@ -12,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: none;
         }
     }
@@ -90,7 +92,7 @@
         display: flex;
         justify-content: space-between;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             padding: 10px;
         }
     }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 /* stylelint-disable no-descending-specificity */
 .adf-new-task-heading {
     padding-top: 12px;
@@ -28,11 +30,11 @@
         }
 
         .input-row {
-            @media screen and (max-width: 960px){
+            @include layout-bp(lt-md) {
                 flex-direction: column;
             }
 
-            @media screen and (min-width: 960px) {
+            @include layout-bp(lt-md) {
                 mat-form-field {
                     margin-right: 20px;
                 }
@@ -44,7 +46,7 @@
             box-sizing: border-box;
             max-width: 48%;
 
-            @media screen and (max-width: 600px){
+            @include layout-bp(lt-sm) {
                 max-width: 100%;
             }
         }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 adf-task-details {
     width: 100%;
 
@@ -52,7 +54,7 @@ adf-task-details {
 
             &-sidebar {
                 &-drawer {
-                    @media screen and (max-width: 1279px) {
+                    @include layout-bp(lt-lg) {
                         margin-left: 0;
                     }
                 }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-controls {
         display: flex;
@@ -25,7 +27,7 @@
     }
 }
 
-@media screen and  (max-width: 959px) {
+@include layout-bp(lt-md) {
     adf-card-view .adf-property-value {
         text-overflow: ellipsis;
         overflow: hidden;