@alfresco/adf-process-services 8.1.0-14701637708 → 8.1.0-14714093103

package/lib/app-list/apps-list.component.scss

@@ -1,21 +1,52 @@
-@import 'styles/flex';
-@import 'styles/mat-selectors';
+@use 'sass:map';
+@use '../styles/mat-selectors' as ms;
+@use '../styles/flex' as flex;
 
 .adf-app-list-item {
     cursor: pointer;
 }
 
 $tile-themes: (
-    theme-1: (bg: #269abc, color: #168aac),
-    theme-2: (bg: #7da9b0, color: #6d99a0),
-    theme-3: (bg: #7689ab, color: #66799b),
-    theme-4: (bg: #c74e3e, color: #b73e2e),
-    theme-5: (bg: #fab96c, color: #eaa95c),
-    theme-6: (bg: #759d4c, color: #658d3c),
-    theme-7: (bg: #b1b489, color: #a1a479),
-    theme-8: (bg: #a17299, color: #916289),
-    theme-9: (bg: #696c67, color: #595c57),
-    theme-10: (bg: #cabb33, color: #baab23)
+    theme-1: (
+        bg: #269abc,
+        color: #168aac
+    ),
+    theme-2: (
+        bg: #7da9b0,
+        color: #6d99a0
+    ),
+    theme-3: (
+        bg: #7689ab,
+        color: #66799b
+    ),
+    theme-4: (
+        bg: #c74e3e,
+        color: #b73e2e
+    ),
+    theme-5: (
+        bg: #fab96c,
+        color: #eaa95c
+    ),
+    theme-6: (
+        bg: #759d4c,
+        color: #658d3c
+    ),
+    theme-7: (
+        bg: #b1b489,
+        color: #a1a479
+    ),
+    theme-8: (
+        bg: #a17299,
+        color: #916289
+    ),
+    theme-9: (
+        bg: #696c67,
+        color: #595c57
+    ),
+    theme-10: (
+        bg: #cabb33,
+        color: #baab23
+    )
 );
 
 .adf-app-list-spinner,
@@ -26,7 +57,7 @@ $tile-themes: (
     flex-direction: column;
     height: 85vh;
 
-    #{$mat-progress-spinner} {
+    #{ms.$mat-progress-spinner} {
         margin: 0 auto;
     }
 }
@@ -46,12 +77,12 @@ $tile-themes: (
             flex: 1 1 33.3333%;
             max-width: 33.3333%;
 
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 flex: 1 1 50%;
                 max-width: 50%;
             }
 
-            @include layout-bp(lt-sm) {
+            @include flex.layout-bp(lt-sm) {
                 flex: 1 1 100%;
                 max-width: 100%;
             }
@@ -59,12 +90,12 @@ $tile-themes: (
             &-card {
                 @for $i from 1 through 10 {
                     &.theme-#{$i} {
-                        $tile-theme: map-get($tile-themes, theme-#{$i});
+                        $tile-theme: map.get($tile-themes, theme-#{$i});
 
-                        background-color: map-get($tile-theme, bg);
+                        background-color: map.get($tile-theme, bg);
 
                         .adf-app-listgrid-item-card-logo-icon {
-                            color: map-get($tile-theme, color);
+                            color: map.get($tile-theme, color);
                         }
                     }
                 }
@@ -72,15 +103,12 @@ $tile-themes: (
                 outline: none;
                 flex-direction: column;
                 display: flex;
-                transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
-                box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+                transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
                 min-height: 200px;
                 padding: 0;
 
                 &:hover {
-                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                    0 5px 5px -3px rgba(0, 0, 0, 0.2);
+                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
                     cursor: pointer;
                     transform: scale(1.015);
                 }

package/lib/attachment/process-attachment-list/process-attachment-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
@@ -41,7 +41,7 @@
     object-fit: contain;
     margin-top: 17px;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         width: 250px;
     }
 }

package/lib/attachment/task-attachment-list/task-attachment-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
@@ -23,7 +23,7 @@
     word-break: break-all;
     white-space: pre-line;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         font-size: 40px;
     }
 }
@@ -46,7 +46,7 @@
     object-fit: contain;
     margin-top: 17px;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         width: 250px;
     }
 }

package/lib/form/start-form/start-form.component.scss

@@ -1,23 +1,23 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-form-container {
     max-width: 100%;
     max-height: 100%;
 
-    & #{$mat-card} {
+    & #{ms.$mat-card} {
         padding: 16px 24px;
         overflow: hidden;
     }
 
-    & #{$mat-card-header-text} {
+    & #{ms.$mat-card-header-text} {
         margin: 0;
     }
 
-    & #{$mat-tab-body-content} {
+    & #{ms.$mat-tab-body-content} {
         overflow: hidden;
     }
 
-    & #{$mat-tab-label-text} {
+    & #{ms.$mat-tab-label-text} {
         font-size: var(--theme-subheading-2-font-size);
         line-height: var(--theme-headline-line-height);
         letter-spacing: -0.4px;
@@ -26,79 +26,79 @@
         text-transform: uppercase;
     }
 
-    & #{$mat-tab-ink-bar} {
+    & #{ms.$mat-tab-ink-bar} {
         height: 4px;
     }
 
-    & #{$mat-form-field-wrapper} {
+    & #{ms.$mat-form-field-wrapper} {
         margin: 0 12px 0 0;
     }
 }
 
-    .adf-form-container-card {
-        .adf {
-            &-form-title {
-                font-size: var(--theme-title-font-size);
-            }
+.adf-form-container-card {
+    .adf {
+        &-form-title {
+            font-size: var(--theme-title-font-size);
+        }
 
-            &-form-debug-container {
-                padding: 10px;
-            }
+        &-form-debug-container {
+            padding: 10px;
+        }
 
-            &-form-debug-container .adf-debug-toggle-text {
-                padding-left: 15px;
-                cursor: pointer;
-            }
+        &-form-debug-container .adf-debug-toggle-text {
+            padding-left: 15px;
+            cursor: pointer;
+        }
 
-            &-form-debug-container .adf-debug-toggle-text:hover {
-                font-weight: bold;
-            }
+        &-form-debug-container .adf-debug-toggle-text:hover {
+            font-weight: bold;
+        }
 
-            &-form-reload-button {
-                position: absolute;
-                right: 12px;
-                top: 30px;
-            }
+        &-form-reload-button {
+            position: absolute;
+            right: 12px;
+            top: 30px;
+        }
 
-            &-form-validation-button {
-                position: absolute;
-                right: 50px;
-                top: 39px;
-                color: var(--theme-accent-color);
+        &-form-validation-button {
+            position: absolute;
+            right: 50px;
+            top: 39px;
+            color: var(--theme-accent-color);
 
-                & .adf-invalid-color {
-                    color: var(--theme-warn-color);
-                }
+            & .adf-invalid-color {
+                color: var(--theme-warn-color);
             }
+        }
 
-            &-form-hide-button {
-                display: none;
-            }
+        &-form-hide-button {
+            display: none;
+        }
 
-            &-task-title {
-                text-align: center;
-            }
+        &-task-title {
+            text-align: center;
+        }
 
-            &-label {
-                width: 32px;
-                height: 16px;
-                font-size: var(--theme-caption-font-size);
-                line-height: var(--theme-headline-line-height);
-                text-align: left;
-                white-space: nowrap;
-            }
+        &-label {
+            width: 32px;
+            height: 16px;
+            font-size: var(--theme-caption-font-size);
+            line-height: var(--theme-headline-line-height);
+            text-align: left;
+            white-space: nowrap;
+        }
 
-            &-form-mat-card-actions {
-                float: right;
-                padding-bottom: 25px;
-                padding-right: 25px;
+        &-form-mat-card-actions {
+            float: right;
+            padding-bottom: 25px;
+            padding-right: 25px;
 
-                & #{$mat-button} {
-                    height: 36px;
-                    border-radius: 5px;
-                }
+            & #{ms.$mat-button} {
+                height: 36px;
+                border-radius: 5px;
+            }
 
-            & #{$mat-button-label} {
+            & #{ms.$mat-button-label} {
                 width: 58px;
                 height: 20px;
                 opacity: 0.54;
@@ -109,11 +109,10 @@
     }
 }
 
-
 form-field {
     width: 100%;
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

package/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-attach-file-widget-dialog {
-    #{$mat-dialog-actions} {
+    #{ms.$mat-dialog-actions} {
         background-color: var(--theme-background-color);
         display: flex;
         justify-content: flex-end;
@@ -30,7 +30,6 @@
     }
 }
 
-#{$mat-dialog-surface} {
+#{ms.$mat-dialog-surface} {
     overflow-x: hidden;
 }
-

package/lib/form/widgets/content-widget/attach-folder-widget.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-attach-folder-widget-container {
@@ -28,7 +28,7 @@
     &-attach-folder-files-row {
         padding-left: 8px;
 
-        #{$mat-line} {
+        #{ms.$mat-line} {
             margin-bottom: 0;
         }
     }
@@ -42,7 +42,7 @@
         display: flex;
         flex-direction: row-reverse;
 
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
             margin-left: 4px;
             margin-right: 0;
         }

package/lib/form/widgets/dropdown/dropdown.widget.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-dropdown-widget {
@@ -9,7 +9,7 @@
             width: 100%;
         }
 
-        #{$mat-select-value-text} {
+        #{ms.$mat-select-value-text} {
             font-size: var(--theme-body-1-font-size);
         }
 

package/lib/form/widgets/people/people.widget.scss

@@ -1,10 +1,10 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-people-widget {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 10px;
         }
 

package/lib/form/widgets/upload/upload.widget.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-upload-widget-container {
@@ -27,7 +27,7 @@
     }
 
     &-upload-files-row {
-        #{$mat-line} {
+        #{ms.$mat-line} {
             margin-bottom: 0;
         }
     }

package/lib/people/components/people/people.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-assignment-header {
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
@@ -26,7 +26,7 @@
     }
 }
 
-.adf-assignment-top-container#{$mat-card} {
+.adf-assignment-top-container#{ms.$mat-card} {
     border-top: 1px solid var(--adf-theme-foreground-divider-color);
     margin: 0;
     padding: 0;

package/lib/process-list/components/start-process/start-process.component.scss

@@ -1,5 +1,5 @@
-@import 'styles/flex';
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
+@use '../../../styles/flex' as flex;
 
 .adf {
     &-start-process {
@@ -12,7 +12,7 @@
             width: 100%;
         }
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             color: var(--adf-theme-mat-grey-color-a200-dark);
         }
 
@@ -22,7 +22,7 @@
             text-align: right;
         }
 
-        #{$mat-button} {
+        #{ms.$mat-button} {
             width: auto;
             padding: 0 16px;
             margin: 0 8px;
@@ -40,7 +40,7 @@
         }
 
         &-process-name {
-            margin-top: 16px
+            margin-top: 16px;
         }
     }
 
@@ -62,11 +62,11 @@
     }
 
     &-start-form-container {
-        #{$mat-card-content} {
+        #{ms.$mat-card-content} {
             margin-bottom: 100px;
         }
 
-        #{$mat-card-header} {
+        #{ms.$mat-card-header} {
             display: none;
         }
 
@@ -81,7 +81,7 @@
         padding-bottom: 16px;
 
         button {
-            text-wrap: none;
+            text-wrap: nowrap;
         }
     }
 
@@ -92,11 +92,11 @@
         align-items: baseline;
 
         .adf-start-process-definition-select {
-            .mat-mdc-select-arrow-wrapper {
-                transform:  none;
+            #{ms.$mat-select-arrow-wrapper} {
+                transform: none;
 
                 svg {
-                    fill: initial;
+                    fill: currentcolor;
                 }
             }
         }
@@ -107,7 +107,7 @@
     }
 }
 
-@include layout-bp(lt-sm) {
+@include flex.layout-bp(lt-sm) {
     .adf-start-process {
         width: 90%;
         margin-left: auto;

package/lib/styles/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */

package/lib/styles/mat-selectors.scss

@@ -0,0 +1,25 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$mat-progress-spinner: '.mat-mdc-progress-spinner';
+$mat-card: '.mat-mdc-card';
+$mat-card-header-text: '.mat-mdc-card-header-text';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-card-header: '.mat-mdc-card-header';
+$mat-card-title: '.mat-mdc-card-title';
+$mat-tab-body-content: '.mat-mdc-tab-body-content';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$mat-input-element: '.mat-mdc-input-element';
+$mat-dialog-actions: '.mat-mdc-dialog-actions';
+$mat-line: '.mat-line';
+$mat-icon: '.mat-icon';
+$mat-select-value-text: '.mat-mdc-select-value-text';
+$mat-form-field-label: '.mat-mdc-floating-label';
+$mat-form-field: '.mat-mdc-form-field';
+$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';

package/lib/task-list/components/attach-form/attach-form.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-attach-form {
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 

package/lib/task-list/components/checklist/checklist.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 :host {
     width: 100%;
@@ -8,7 +8,7 @@
     font-weight: bolder;
 }
 
-#{$mat-form-field} {
+#{ms.$mat-form-field} {
     width: 100%;
 }