@alfresco/adf-core 8.1.0-14701637708 → 8.1.0-14711395239

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

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-property-list {
     border: unset;
@@ -28,11 +28,11 @@
         .adf-property-field {
             width: 100%;
 
-            #{mat-form-field-underline} {
+            #{ms.$mat-form-field-underline} {
                 display: none;
             }
 
-            #{mat-input-element} {
+            #{ms.$mat-input-element} {
                 text-overflow: ellipsis;
                 color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
@@ -40,28 +40,28 @@
             }
 
             .adf-card-view__key-value-pairs__row {
-                #{$mat-input-element} {
+                #{ms.$mat-input-element} {
                     margin-top: 0;
                     padding-left: 12px;
                 }
             }
 
-            #{$mat-form-text-field-infix} {
+            #{ms.$mat-form-text-field-infix} {
                 border-top-width: 0;
             }
 
-            #{$mat-form-field-flex} {
+            #{ms.$mat-form-field-flex} {
                 padding-top: 0;
             }
 
-            #{$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-wrapper} {
                 background-color: inherit;
                 padding-bottom: 0;
                 padding-left: 0;
                 padding-right: 0;
             }
 
-            #{$mat-form-field-label} {
+            #{ms.$mat-form-field-label} {
                 padding: 0;
                 justify-content: center;
                 display: flex;
@@ -92,7 +92,7 @@
             height: 32px;
             padding-left: 10px;
 
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--adf-metadata-action-button-clear-color);
                 padding: 5px 0 6px 12px;
                 margin: 5px 0 0;
@@ -102,7 +102,7 @@
         &.adf-property-readonly-value {
             color: var(--adf-metadata-property-panel-label-color);
 
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--adf-metadata-property-panel-label-color);
             }
         }

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

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-array-item-icon {
@@ -22,7 +22,7 @@
     }
 
     &-array-item-more-chip-container {
-        &#{$mat-card} {
+        &#{ms.$mat-card} {
             box-shadow: none;
             max-height: 300px;
             overflow-y: auto;
@@ -30,7 +30,7 @@
     }
 
     &-property-value {
-        #{$mat-chip-list} {
+        #{ms.$mat-chip-list} {
             padding-top: 6px;
         }
     }
@@ -45,7 +45,7 @@
         border-color: var(--adf-theme-foreground-divider-color);
         border-radius: 0;
 
-        #{$mat-chip}:hover {
+        #{ms.$mat-chip}:hover {
             cursor: pointer;
         }
     }

package/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-dateitem {
     .adf-property-value {
@@ -50,7 +50,7 @@
             align-items: center;
             justify-content: space-between;
 
-            #{$mat-icon} {
+            #{ms.$mat-icon} {
                 opacity: 0.5;
 
                 &:hover {

package/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-key-value-pairs-item {
     .adf-property-col-key {
@@ -28,19 +28,19 @@
                 justify-content: center;
             }
 
-            &__add-btn#{$mat-button} {
+            &__add-btn#{ms.$mat-button} {
                 margin-bottom: 20px;
             }
 
             &__read-only {
                 padding-bottom: 20px;
 
-                #{$mat-table} {
+                #{ms.$mat-table} {
                     box-shadow: none;
                 }
 
-                #{$mat-header-row},
-                #{$mat-row} {
+                #{ms.$mat-header-row},
+                #{ms.$mat-row} {
                     padding: 0;
                 }
             }

package/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-selectitem {
     .adf-property-value {
@@ -17,23 +17,23 @@
     .adf-property-value-editable.adf-property-value-editable {
         padding-left: 0;
 
-        #{$mat-text-field-no-label} #{$mat-form-field-infix} {
+        #{ms.$mat-text-field-no-label} #{ms.$mat-form-field-infix} {
             padding: 0;
         }
 
-        #{$mat-form-field-wrapper} {
+        #{ms.$mat-form-field-wrapper} {
             background-color: unset;
         }
 
-        #{$mat-select} {
+        #{ms.$mat-select} {
             margin-top: 0;
             border-radius: 6px;
 
-            #{$mat-select-value} {
+            #{ms.$mat-select-value} {
                 color: var(--adf-metadata-action-button-clear-color);
             }
 
-            #{$mat-select-trigger} {
+            #{ms.$mat-select-trigger} {
                 padding: 6px 12px 6px 6px;
             }
         }
@@ -43,7 +43,7 @@
         padding-left: 10px;
     }
 
-    #{$mat-form-field-subscript-wrapper} {
+    #{ms.$mat-form-field-subscript-wrapper} {
         display: none;
     }
 
@@ -53,7 +53,7 @@
         color: var(--adf-metadata-property-panel-title-color);
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         display: none;
     }
 

package/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 $select-filter-height: 4em !default;
 
@@ -17,7 +17,7 @@ $select-filter-height: 4em !default;
         background: var(--adf-theme-background-card-color);
     }
 
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 
@@ -26,7 +26,7 @@ $select-filter-height: 4em !default;
     }
 }
 
-#{$mat-select-panel}.adf-select-filter {
+#{ms.$mat-select-panel}.adf-select-filter {
     transform: none;
     overflow-x: hidden;
     max-height: calc(256px + #{$select-filter-height});

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

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-textitem {
     .adf-textitem-error {
@@ -29,20 +29,20 @@
             color: var(--adf-theme-foreground-text-color);
         }
 
-        #{$mat-button-touch-target} {
+        #{ms.$mat-button-touch-target} {
             width: 30px;
             height: 30px;
         }
     }
 
-    #{$mat-form-field-icon-suffix} {
+    #{ms.$mat-form-field-icon-suffix} {
         position: absolute;
         right: 1px;
         bottom: 7px;
     }
 
     .adf-textitem-chip-list-container {
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             margin-top: 6px;
         }
     }
@@ -56,7 +56,7 @@
         }
 
         .adf-property-field {
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--theme-primary-color);
                 cursor: pointer;
             }
@@ -86,7 +86,7 @@
         white-space: nowrap;
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         &::before,
         &::after {
             display: none;

package/lib/comments/comments.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 adf-comments {
     .adf-comments-container {
@@ -10,11 +10,11 @@ adf-comments {
             width: 100%;
             padding-bottom: 8px;
 
-            #{$mat-form-field} {
+            #{ms.$mat-form-field} {
                 width: 100%;
 
-                &#{$mat-form-field-invalid} {
-                    #{$mat-input-element} {
+                &#{ms.$mat-form-field-invalid} {
+                    #{ms.$mat-input-element} {
                         &::placeholder,
                         &:focus::placeholder {
                             color: var(--theme-warn-color);
@@ -23,15 +23,15 @@ adf-comments {
                 }
             }
 
-            #{$mat-form-field-wrapper} {
-                #{$mat-form-field-flex} {
-                    #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-wrapper} {
+                #{ms.$mat-form-field-flex} {
+                    #{ms.$mat-form-field-infix} {
                         padding-bottom: 2px;
                         padding-top: 25px;
                     }
                 }
 
-                #{$mat-input-element} {
+                #{ms.$mat-input-element} {
                     &:focus::placeholder {
                         color: var(--theme-primary-color);
                         -webkit-font-smoothing: subpixel-antialiased;
@@ -62,7 +62,7 @@ adf-comments {
         justify-content: flex-end;
     }
 
-    #{$mat-list-item-unscoped-content} {
+    #{ms.$mat-list-item-unscoped-content} {
         display: flex;
         padding: 0 16px;
     }

package/lib/datatable/components/datatable/datatable.component.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @use '@angular/material' as mat;
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 $data-table-header-font-size: var(--theme-caption-font-size) !default;
 $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
@@ -53,7 +53,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable-list,
-#{$cdk-drag-preview} {
+#{ms.$cdk-drag-preview} {
     display: flex;
     flex-direction: column;
     background-color: var(--adf-theme-background-card-color);
@@ -145,14 +145,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         .adf-datatable-row {
-            @include material-animation-default(0.28s);
+            @include mixins.material-animation-default(0.28s);
 
             transition-property: background-color;
             border-top: 1px solid var(--adf-theme-foreground-text-color-007);
             min-height: $data-table-row-height;
             cursor: pointer;
 
-            @include adf-no-select;
+            @include mixins.adf-no-select;
 
             &.adf-is-selected,
             &.adf-is-selected:hover {
@@ -238,7 +238,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         button {
-            #{$mat-icon} {
+            #{ms.$mat-icon} {
                 margin-top: -10px;
             }
         }
@@ -512,7 +512,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable-cell-header {
-    @include adf-no-select;
+    @include mixins.adf-no-select;
 
     position: relative;
     display: flex;
@@ -532,7 +532,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     &.adf-sortable {
-        @include adf-no-select;
+        @include mixins.adf-no-select;
 
         display: flex;
         align-items: center;
@@ -544,7 +544,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         padding-right: 0.25rem;
 
         &::after {
-            @include typo-icon;
+            @include mixins.typo-icon;
 
             font-size: $data-table-header-sort-icon-size;
             content: '\e5d8';
@@ -626,7 +626,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
-#{$cdk-drag-preview} {
+#{ms.$cdk-drag-preview} {
     min-height: $data-table-row-height;
     display: flex;
     flex-direction: row;
@@ -646,7 +646,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 /* [Accessibility] Material checkbox labels */
-.adf-checkbox-sr-only #{$mat-checkbox-label} {
+.adf-checkbox-sr-only #{ms.$mat-checkbox-label} {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -692,7 +692,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable--empty {
-    @include flex-column;
+    @include mixins.flex-column;
 
     justify-content: center;
     align-items: center;
@@ -719,7 +719,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-datatable-body {
-        @include flex-column;
+        @include mixins.flex-column;
 
         justify-content: center;
         align-items: center;

package/lib/dialogs/edit-json/edit-json.dialog.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-edit-json-dialog {
-    #{$mat-dialog-content} {
+    #{ms.$mat-dialog-content} {
         height: 300px;
         overflow: hidden;
     }

package/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf-dynamic-chip-list-container {
     display: flex;
@@ -60,10 +60,10 @@
         margin-bottom: 0;
         padding: 6px 11px;
 
-        #{$mat-evolution-chip-action} {
+        #{ms.$mat-evolution-chip-action} {
             padding: 2px 12px;
 
-            #{$mat-evolution-chip-text-label} {
+            #{ms.$mat-evolution-chip-text-label} {
                 color: var(--adf-theme-foreground-text-color-054);
             }
         }

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

@@ -1,6 +1,6 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/flex';
-@import 'styles/mat-selectors';
+@use '../../styles/flex' as flex;
+@use '../../styles/mat-selectors' as ms;
 
 .adf-hidden {
     display: none;
@@ -18,7 +18,7 @@
         display: grid;
 
         &-column-view {
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 display: flow;
             }
 
@@ -47,7 +47,7 @@
         }
     }
 
-    @include layout-bp(lt-md) {
+    @include flex.layout-bp(lt-md) {
         .adf-grid-list-item {
             flex: 1 0 100%;
         }
@@ -75,10 +75,10 @@
         top: 1.8em;
     }
 
-    #{$mat-focused} {
+    #{ms.$mat-focused} {
         width: 100%;
 
-        #{$mat-text-field-focused} {
+        #{ms.$mat-text-field-focused} {
             label {
                 color: var(--theme-primary-color);
             }
@@ -89,12 +89,12 @@
             background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             color: var(--theme-primary-color);
         }
     }
 
-    #{$mat-grid-tile} {
+    #{ms.$mat-grid-tile} {
         overflow: visible;
         width: 80%;
     }
@@ -110,16 +110,16 @@
         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;
         }
 
@@ -132,13 +132,13 @@
             text-transform: uppercase;
         }
 
-        & #{$mat-tab-ink-bar} {
-            #{$mat-tab-indicator-underline} {
+        & #{ms.$mat-tab-ink-bar} {
+            #{ms.$mat-tab-indicator-underline} {
                 border-top-width: 4px;
             }
         }
 
-        & #{$mat-form-field-wrapper} {
+        & #{ms.$mat-form-field-wrapper} {
             margin: 0 12px 0 0;
         }
     }
@@ -201,7 +201,7 @@
         padding-bottom: 25px;
         padding-right: 25px;
 
-        & #{$mat-button} {
+        & #{ms.$mat-button} {
             height: 36px;
             border-radius: 5px;
             width: auto;
@@ -210,7 +210,7 @@
             white-space: nowrap;
         }
 
-        & #{$mat-button-label} {
+        & #{ms.$mat-button-label} {
             min-width: 58px;
         }
     }
@@ -223,7 +223,7 @@
         }
     }
 
-    &-left-label-input-container #{$mat-form-field-label} {
+    &-left-label-input-container #{ms.$mat-form-field-label} {
         top: auto;
         bottom: 0;
     }
@@ -237,7 +237,7 @@
 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/components/inplace-form-input/inplace-form-input.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 $adf-inplace-input-padding: 7px;
 
@@ -10,16 +10,16 @@ $adf-inplace-input-padding: 7px;
         }
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         display: none;
     }
 
-    #{$mat-form-text-field-infix} {
+    #{ms.$mat-form-text-field-infix} {
         display: flex;
         border-top: 0;
     }
 
-    #{$mat-form-field-label} {
+    #{ms.$mat-form-field-label} {
         padding: $adf-inplace-input-padding;
     }
 

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

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-amount-widget {
@@ -14,17 +14,17 @@
     &-amount-widget__input {
         margin-top: -15px;
 
-        #{$mat-focused} {
+        #{ms.$mat-focused} {
             transition: none;
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             padding-top: 16px;
             padding-bottom: 16px;
             align-self: flex-end;
         }
 
-        &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) {
+        &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);
             }

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

@@ -1,27 +1,27 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-date-time-widget {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 26px;
         }
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 20px;
         }
     }
 
     &-left-label-input-datepicker {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 0;
         }
-        #{$mat-form-text-field-infix} {
+        #{ms.$mat-form-text-field-infix} {
             width: 100%;
         }
     }
 }
 
-.mat-datetimepicker-toggle {
+#{ms.$mat-datetimepicker-toggle} {
     color: var(--adf-theme-foreground-icon-color);
 }