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

package/lib/aspect-list/aspect-list-dialog.component.scss

@@ -1,66 +1,61 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-aspect-list-dialog {
     display: block;
 
-    #{$mat-expansion-panel-body} {
+    #{ms.$mat-expansion-panel-body} {
         margin-top: -2px;
     }
 }
 
-.adf {
-    &-aspect-list-dialog-title {
-        font-size: large;
-        font-weight: 200;
-        margin-top: 0;
-    }
+.adf-aspect-list-dialog-title {
+    font-size: large;
+    font-weight: 200;
+    margin-top: 0;
+}
 
-    &-aspect-list-dialog-description {
-        font-size: small;
-        line-height: normal;
-    }
+.adf-aspect-list-dialog-description {
+    font-size: small;
+    line-height: normal;
+}
 
-    &-aspect-list-dialog-information {
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 4px;
-        padding-left: 4px;
-        padding-right: 4px;
-        font-size: small;
-    }
+.adf-aspect-list-dialog-information {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: small;
+}
 
-    &-aspect-list-dialog {
-        justify-content: space-between;
-        padding-left: 4px;
-        padding-right: 4px;
-        padding-top: 0;
+.adf-aspect-list-dialog {
+    justify-content: space-between;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 0;
 
-        #{$mat-dialog-content} {
-            padding: 0;
-        }
-
-        &::before {
-            display: none;
-        }
+    &::before {
+        display: none;
     }
+}
 
-    &-aspect-dialog-content {
-        margin-bottom: 8px;
+.adf-aspect-dialog-content {
+    padding: 0;
+    margin-bottom: 8px;
 
-        .adf-aspect-property-table {
-            .adf-aspect-property-table-cell {
-                font-size: smaller;
-                color: var(--adf-theme-foreground-text-color-087);
-            }
+    .adf-aspect-property-table {
+        .adf-aspect-property-table-cell {
+            font-size: smaller;
+            color: var(--adf-theme-foreground-text-color-087);
+        }
 
-            .adf-aspect-property-table-column {
-                &-name {
-                    width: 30%;
-                }
+        .adf-aspect-property-table-column {
+            &-name {
+                width: 30%;
+            }
 
-                &-title {
-                    width: 50%;
-                }
+            &-title {
+                width: 50%;
             }
         }
     }

package/lib/aspect-list/aspect-list.component.scss

@@ -1,4 +1,5 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
+
 $dialog-title-height: 100px;
 $dialog-information-height: 44px;
 $dialog-buttons-height: 68px;
@@ -49,7 +50,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
             box-shadow: none;
             background: border-box;
 
-            #{$mat-checkbox-background} {
+            #{ms.$mat-checkbox-background} {
                 height: 16px;
                 width: 16px;
             }

package/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 $dropdown-horizontal-offset: 30px;
 
@@ -98,6 +98,6 @@ $dropdown-horizontal-offset: 30px;
     }
 }
 
-#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){
+#{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) {
     min-width: fit-content;
 }

package/lib/category/categories-management/categories-management.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-categories-management {
     .adf-category-name-field {
@@ -20,7 +20,7 @@
             box-sizing: content-box;
         }
 
-        #{$mat-form-field-error} {
+        #{ms.$mat-form-field-error} {
             padding-top: 5px;
         }
     }
@@ -56,7 +56,7 @@
         background-color: inherit;
         color: inherit;
 
-        &:not(#{$mat-list-item-disabled}):hover {
+        &:not(#{ms.$mat-list-item-disabled}):hover {
             cursor: pointer;
             background: var(--adf-theme-mat-grey-color-a200);
         }
@@ -86,7 +86,7 @@
         overflow-wrap: anywhere;
     }
 
-    #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+    #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
         opacity: 1;
     }
 }

package/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 $panel-properties-height: 56px !default;
 
@@ -11,11 +11,11 @@ $panel-properties-height: 56px !default;
             margin: 12px;
 
             adf-card-view-textitem {
-                #{$mat-form-field-subscript-wrapper} {
+                #{ms.$mat-form-field-subscript-wrapper} {
                     display: none;
                 }
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -47,7 +47,7 @@ $panel-properties-height: 56px !default;
             }
         }
 
-        #{$mat-expansion-panel-body} {
+        #{ms.$mat-expansion-panel-body} {
             padding-top: 16px;
 
             input {
@@ -64,7 +64,7 @@ $panel-properties-height: 56px !default;
             color: var(--adf-theme-foreground-text-color-054);
         }
 
-        #{$mat-chip} {
+        #{ms.$mat-chip} {
             &.metadata-properties-tag-chip {
                 // TODO: bug open https://github.com/angular/components/issues/26584
                 /* stylelint-disable selector-class-pattern */

package/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 /* stylelint-disable no-descending-specificity */
 $content-node-selector-thumbnail-width: 35px !default;
@@ -15,8 +15,8 @@ h2.adf-search-results-label {
     color: var(--adf-theme-foreground-text-color-087);
 }
 
-#{$mdc-dialog} {
-    #{$mat-dialog-surface}:is(div) {
+#{ms.$mdc-dialog} {
+    #{ms.$mat-dialog-surface}:is(div) {
         padding-bottom: 0;
     }
 }
@@ -41,17 +41,17 @@ h2.adf-search-results-label {
     }
 
     &-content {
-        #{$mat-input-element} {
+        #{ms.$mat-input-element} {
             &:focus::placeholder {
                 color: var(--theme-primary-color);
             }
         }
 
-        #{$mat-form-field-wrapper} {
-            #{$mat-form-field-flex} {
+        #{ms.$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-flex} {
                 align-items: center;
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -59,13 +59,13 @@ h2.adf-search-results-label {
 
         .adf-sites-dropdown-form-field {
             label {
-                &#{$mat-form-field-label} {
+                &#{ms.$mat-form-field-label} {
                     top: 32px;
                 }
             }
         }
 
-        #{$mat-form-field-subscript-wrapper} {
+        #{ms.$mat-form-field-subscript-wrapper} {
             height: 16px;
         }
 
@@ -88,7 +88,7 @@ h2.adf-search-results-label {
                 }
             }
 
-            #{$mat-form-field-subscript-wrapper} {
+            #{ms.$mat-form-field-subscript-wrapper} {
                 display: none;
             }
         }

package/lib/content-node-selector/content-node-selector.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-content-node-selector {
     .adf-upload-dialog {
@@ -42,7 +42,7 @@ adf-content-node-selector {
 }
 
 .adf-content-node-selector-dialog {
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 
@@ -50,7 +50,7 @@ adf-content-node-selector {
         color: var(--adf-theme-foreground-base-color-045);
     }
 
-    #{$mat-dialog-title} {
+    #{ms.$mat-dialog-title} {
         margin-bottom: 0;
         padding: 0;
 

package/lib/content-node-share/content-node-share.dialog.scss

@@ -1,8 +1,8 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 .adf-share-link-dialog {
     .adf-share-link {
-        #{$mat-form-field-flex} {
+        #{ms.$mat-form-field-flex} {
             height: 48px;
         }
 
@@ -35,7 +35,7 @@
         &__form {
             padding-top: 8px;
 
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+            #{ms.$mat-form-field-infix}:has(.adf-share-link__input) {
                 border-top: 0.9375em solid transparent;
                 border-bottom: 0.9375em solid transparent;
                 height: 16px;

package/lib/dialogs/folder/folder.dialog.scss

@@ -1,21 +1,21 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-folder-dialog {
     .adf-folder-dialog-content {
         padding: 0;
         overflow: unset;
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+        #{ms.$mat-form-field-hide-placeholder} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
-        #{$mat-form-field-hint-wrapper} {
+        #{ms.$mat-form-field-hint-wrapper} {
             padding-left: 0;
             margin-left: -2px;
             color: var(--adf-theme-foreground-secondary-text-color);

package/lib/dialogs/library/library.dialog.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-library-dialog {
     .adf-library-dialog-content {
@@ -28,34 +28,34 @@
             padding-top: 4.5px;
         }
 
-        #{$mat-floating-label} {
+        #{ms.$mat-floating-label} {
             -webkit-font-smoothing: subpixel-antialiased;
         }
 
-        &#{$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+        &#{ms.$mat-form-field-hide-placeholder} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
         &-description {
-            &#{$mat-form-field-hide-placeholder} {
-                #{$mat-floating-label} {
+            &#{ms.$mat-form-field-hide-placeholder} {
+                #{ms.$mat-floating-label} {
                     padding-top: 20px;
                 }
             }
         }
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-error-wrapper} {
+        #{ms.$mat-form-field-error-wrapper} {
             margin-left: -2px;
             font-size: 10.5px;
             -webkit-font-smoothing: subpixel-antialiased;
 
-            #{$mat-form-field-error} {
+            #{ms.$mat-form-field-error} {
                 height: 13.125px;
             }
         }

package/lib/document-list/components/document-list.component.scss

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

package/lib/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/mat-selectors.scss

@@ -0,0 +1,63 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$mat-icon: '.mat-icon';
+$mat-focused: '.mat-focused';
+$mat-line: '.mat-line';
+$mat-tab-label: '.mat-mdc-tab';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-header: '.mat-mdc-tab-header';
+$mat-chip: '.mat-mdc-chip';
+$mat-checkbox: '.mat-mdc-checkbox';
+$mat-checkbox-box: '.mdc-checkbox';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$mat-form-field: '.mat-mdc-form-field';
+$mat-form-field-flex: '.mat-mdc-form-field-flex';
+$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
+$mat-line-ripple: '.mdc-line-ripple';
+$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
+$mat-form-text-field-infix: '.mat-mdc-form-text-infix';
+$mat-form-field-label: '.mat-mdc-floating-label';
+$mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
+$mat-text-field-outlined: '.mdc-text-field--outlined';
+$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
+$mat-input-element: '.mat-mdc-input-element';
+$mat-card: '.mat-mdc-card';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-list-item-primary-text: '.mdc-list-item__primary-text';
+$mat-list-item-end: '.mdc-list-item__end';
+$mat-select: '.mat-mdc-select';
+$mat-menu-panel: '.mat-mdc-menu-panel';
+$mat-expansion-panel: '.mat-expansion-panel';
+$mat-calendar: '.mat-calendar';
+$mat-calendar-header: '.mat-calendar-header';
+$mat-toolbar: '.mat-toolbar';
+$mat-text-field-no-label: '.mdc-text-field--no-label';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
+$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-form-field-error: '.mat-mdc-form-field-error';
+$mat-checkbox-background: '.mdc-checkbox__background';
+$mat-floating-label: '.mdc-floating-label';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-title: '.mdc-dialog__title';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';
+$mdc-dialog: '.mdc-dialog';
+$mat-evolution-chip: '.mdc-evolution-chip';
+$mat-standard-chip: '.mat-mdc-standard-chip';
+$mat-notched-outline: '.mdc-notched-outline';
+$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
+$mat-select-trigger: '.mat-mdc-select-trigger';
+$mat-select-arrow: '.mat-mdc-select-arrow';
+$mat-notched-outline-leading: '.mdc-notched-outline__leading';
+$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
+$mat-evolution-chip-set: '.mdc-evolution-chip-set';
+$cdk-overlay-pane: '.cdk-overlay-pane';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-list-item-disabled: '.mdc-list-item--disabled';
+$mat-switch: '.mdc-switch';
+$mat-list-item: '.mdc-list-item';
+$mat-text-field: '.mdc-text-field';

package/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
-#{$mdc-dialog} {
-    #{$mat-dialog-surface}:is(div) {
+#{ms.$mdc-dialog} {
+    #{ms.$mat-dialog-surface}:is(div) {
         padding-bottom: 0;
     }
 }
@@ -31,11 +31,11 @@
                 width: 100%;
                 justify-content: unset;
 
-                #{$mat-button-label} {
+                #{ms.$mat-button-label} {
                     padding-right: 0;
                 }
 
-                #{$mat-icon} {
+                #{ms.$mat-icon} {
                     font-size: 24px;
                     width: 24px;
                     height: 24px;

package/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 $search-result-height: calc(100% - 60px);
 
@@ -9,7 +9,7 @@ $search-result-height: calc(100% - 60px);
         overflow: auto;
         border: 2px solid var(--adf-theme-foreground-text-color-007);
 
-        #{$mat-list-item-end} {
+        #{ms.$mat-list-item-end} {
             display: none;
         }
 
@@ -54,18 +54,18 @@ $search-result-height: calc(100% - 60px);
             padding-bottom: 0;
             padding-top: 12px;
 
-            #{$mat-form-field-wrapper} {
-                #{$mat-form-field-flex} {
+            #{ms.$mat-form-field-wrapper} {
+                #{ms.$mat-form-field-flex} {
                     align-items: center;
 
-                    #{$mat-form-field-infix} {
+                    #{ms.$mat-form-field-infix} {
                         padding-top: 0;
                         padding-bottom: 0;
                     }
                 }
             }
 
-            #{$mat-form-field-subscript-wrapper} {
+            #{ms.$mat-form-field-subscript-wrapper} {
                 height: 16px;
             }
 

package/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf {
     &-permission-card {
@@ -88,7 +88,7 @@
         height: calc(100% - 63px);
     }
 
-    &-local-permission-container#{$mat-card-content} {
+    &-local-permission-container#{ms.$mat-card-content} {
         overflow: hidden;
         flex: 1 1 auto;
         padding: 0;

package/lib/permission-manager/components/user-role-column/user-role-column.component.scss

@@ -1,11 +1,11 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
-.adf-role-selector-field#{$mat-form-field} {
+.adf-role-selector-field#{ms.$mat-form-field} {
     width: 100%;
     max-width: 200px;
     height: 40px;
 
-    #{$mat-form-field-infix}:not(:disabled) {
+    #{ms.$mat-form-field-infix}:not(:disabled) {
         padding-top: 8px;
     }
 }

package/lib/search/components/search-check-list/search-check-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-check-list > div {
     display: flex;
@@ -21,7 +21,7 @@
             white-space: nowrap;
         }
 
-        #{$mat-checkbox-box} {
+        #{ms.$mat-checkbox-box} {
             margin-left: 4px;
             margin-top: 5px;
             margin-bottom: 4px;