@alfresco/adf-content-services 8.1.0-14664375052 → 8.1.0-14711395239

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

@@ -1,9 +1,9 @@
-@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;
     }
 }
@@ -35,7 +35,7 @@ adf-aspect-list-dialog {
         padding-right: 4px;
         padding-top: 0;
 
-        #{$mat-dialog-content} {
+        #{ms.$mat-dialog-content} {
             padding: 0;
         }
 

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,190 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$material-icons: '.material-icons';
+$mat-icon: '.mat-icon';
+$mat-icon-button: '.mat-mdc-icon-button';
+$mat-icon-button-hover: '.mdc-icon-button__ripple';
+$mat-accent: '.mat-accent';
+$mat-focused: '.mat-focused';
+$mat-line: '.mat-line';
+$mat-tab-label: '.mat-mdc-tab';
+$mat-tab-label-active: '.mdc-tab--active';
+$mat-tab-label-content: '.mdc-tab__content';
+$mat-tab-label-container: '.mat-mdc-tab-label-container';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-list: '.mat-mdc-tab-list';
+$mat-tab-body: '.mat-mdc-tab-body';
+$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
+$mat-tab-body-content: '.mat-mdc-tab-body-content';
+$mat-tab-header: '.mat-mdc-tab-header';
+$mat-tab-labels: '.mat-mdc-tab-labels';
+$mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-chip: '.mat-mdc-chip';
+$mat-chip-list: '.mat-mdc-chip-list';
+$mat-chip-list-wrapper: '.mat-chip-list-wrapper';
+$mat-checkbox: '.mat-mdc-checkbox';
+$mat-checkbox-box: '.mdc-checkbox';
+$mat-checkbox-frame: '.mdc-checkbox__checkmark';
+$mat-checkbox-label: '.mdc-label';
+$mat-checkbox-checked: '.mat-mdc-checkbox-checked';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$mat-button-label-text: '.mdc-button__label';
+$mat-radio-checked: '.mat-mdc-radio-checked';
+$mat-radio-label: '.mdc-label';
+$mat-progress-bar: '.mat-mdc-progress-bar';
+$mat-progress-spinner: '.mat-mdc-progress-spinner';
+$mat-form-field: '.mat-mdc-form-field';
+$mat-form-field-flex: '.mat-mdc-form-field-flex';
+$mat-form-field-outline: '.mat-mdc-form-field-outline';
+$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-field-prefix: '.mat-mdc-form-field-text-prefix';
+$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
+$mat-form-text-field-infix: '.mat-mdc-form-text-infix';
+$mat-form-field-label: '.mat-mdc-floating-label';
+$mat-form-field-invalid: '.mat-form-field-invalid';
+$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-text-field-focused: '.mdc-text-field--focused';
+$mat-dialog-actions: '.mat-mdc-dialog-actions';
+$mat-dialog-container: '.mdc-dialog__container';
+$mat-dialog-content: '.mat-mdc-dialog-content';
+$mat-button-toggle: '.mat-button-toggle';
+$mat-button-toggle-checked: '.mat-button-toggle-checked';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-input-element: '.mat-mdc-input-element';
+$mat-card: '.mat-mdc-card';
+$mat-card-actions: '.mat-mdc-card-actions';
+$mat-card-header-text: '.mat-mdc-card-header-text';
+$mat-card-title: '.mat-mdc-card-title';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-mini-fab: '.mat-mdc-mini-fab';
+$mat-list-item-primary-text: '.mdc-list-item__primary-text';
+$mat-list-item-end: '.mdc-list-item__end';
+$mat-table: '.mat-mdc-table';
+$mat-header-row: '.mat-mdc-header-row';
+$mat-row: '.mat-mdc-row';
+$mat-select: '.mat-mdc-select';
+$mat-select-value: '.mat-select-value';
+$mat-select-value-text: '.mat-mdc-select-value-text';
+$mat-select-panel: '.mat-mdc-select-panel';
+$mat-grid-tile: '.mat-grid-tile';
+$mat-sidenav-content: '.mat-sidenav-content';
+$mat-drawer-transition: '.mat-drawer-transition';
+$mat-drawer-content: '.mat-drawer-content';
+$mat-subheader: '.mat-mdc-subheader';
+$mat-menu-panel: '.mat-mdc-menu-panel';
+$mat-menu-content: '.mat-mdc-menu-content';
+$mat-expansion-panel: '.mat-expansion-panel';
+$mat-expansion-panel-header: '.mat-expansion-panel-header';
+$mat-expanded: '.mat-expanded';
+$mat-calendar: '.mat-calendar';
+$mat-calendar-header: '.mat-calendar-header';
+$mat-calendar-content: '.mat-calendar-content';
+$mat-calendar-table-header: '.mat-calendar-table-header';
+$mat-calendar-body-disabled: '.mat-calendar-body-disabled';
+$mat-toolbar: '.mat-toolbar';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-list-item-content: '.mdc-list-item__content';
+$mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
+$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-dialog-content: '.mdc-dialog__content';
+$mat-floating-label: '.mdc-floating-label';
+$mat-floating-label-above: '.mdc-floating-label--float-above';
+$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-text-filed-input: '.mdc-text-field__input';
+$mat-floating-label-float-above: '.mdc-floating-label--float-above';
+$mat-floating-label-required: '.mdc-floating-label--required';
+$mat-evolution-chip: '.mdc-evolution-chip';
+$mat-standard-chip: '.mat-mdc-standard-chip';
+$mat-evolution-chip-action: '.mdc-evolution-chip__action';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$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-notched-outline-notch: '.mdc-notched-outline__notch';
+$mat-evolution-chip-set: '.mdc-evolution-chip-set';
+$mat-mdc-button: '.mdc-button';
+$mat-outlined-button: '.mat-mdc-outlined-button';
+$mat-button-base: '.mat-mdc-button-base';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$cdk-overlay-pane: '.cdk-overlay-pane';
+$cdk-drag-preview: '.cdk-drag-preview';
+$mat-snackbar: '.mdc-snackbar';
+$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
+$mat-snackbar-label: '.mdc-snackbar__label';
+$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
+$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
+$mat-autocomplete-panel: '.mat-mdc-autocomplete-panel';
+$mat-menu-surface: '.mdc-menu-surface';
+$mat-text-field-filled: '.mdc-text-field--filled';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-text-field-textarea: '.mdc-text-field--textarea';
+$mat-list-item-disabled: '.mdc-list-item--disabled';
+$mat-chip-focus-overlay: '.mat-mdc-chip-focus-overlay';
+$mat-primary: '.mat-primary';
+$mat-checkbox-touch-target: '.mat-mdc-checkbox-touch-target';
+$mat-switch: '.mdc-switch';
+$mat-switch-ripple: '.mdc-switch-ripple';
+$mat-switch-selected: '.mdc-switch--selected';
+$mat-switch-checked: '.mdc-switch--checked';
+$mat-switch-handle-track: '.mdc-switch__handle-track';
+$mat-switch-handle: '.mdc-switch__handle';
+$mat-switch-track: '.mdc-switch__track';
+$mat-switch-icons: '.mdc-switch__icons';
+$mat-switch-shadow: '.mdc-switch__shadow';
+$mat-switch-unselected: '.mdc-switch--unselected';
+$mat-chip-action: '.mat-mdc-chip-action';
+$mat-chip-graphic: '.mat-mdc-chip-graphic';
+$mat-data-table-row: '.mdc-data-table__row';
+$mat-data-table-cell: '.mdc-data-table__cell';
+$mat-data-table-header-cell: '.mdc-data-table__header-cell';
+$mat-toolbar-single-row: '.mat-toolbar-single-row';
+$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row';
+$mat-unthemed: '.mat-unthemed';
+$mat-calendar-period-button: '.mat-calendar-period-button';
+$mat-radio-button: '.mat-mdc-radio-button';
+$mat-radio: '.mdc-radio';
+$mat-tab-ripple: '.mdc-tab__ripple';
+$mat-tab-disabled: '.mat-mdc-tab-disabled';
+$mat-tab-group: '.mat-mdc-tab-group';
+$mat-tab-group-stretch: '.mat-mdc-tab-group-stretch-tabs';
+$mat-list-item: '.mdc-list-item';
+$mat-menu-item: '.mat-mdc-menu-item';
+$mat-icon-no-color: '.mat-icon-no-color';
+$mat-submenu-icon: '.mat-menu-submenu-icon';
+$mat-mdc-submenu-icon: '.mat-mdc-menu-submenu-icon';
+$mdc-form-field: '.mdc-form-field';
+$mat-divider-horizontal: '.mat-divider-horizontal';
+$mat-accordion: '.mat-accordion';
+$mdc-list: '.mdc-list';
+$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
+$mat-text-field: '.mdc-text-field';
+$mat-form-field-disabled: '.mat-form-field-disabled';
+$mat-select-disabled: '.mat-mdc-select-disabled';
+$mat-select-value: '.mat-mdc-select-value';
+$mat-checkbox-native-control: '.mdc-checkbox__native-control';
+$mat-checkbox-selected: '.mdc-checkbox--selected';
+$mat-checkbox-ripple: '.mat-mdc-checkbox-ripple';
+$mat-list-base: '.mat-mdc-list-base';
+$mat-card-header: '.mat-mdc-card-header';

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;

package/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -1,21 +1,21 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
     }
 
-    .adf-chip-list:has(#{$mat-notched-outline}) {
+    .adf-chip-list:has(#{ms.$mat-notched-outline}) {
         margin-top: 4px;
     }
 
-    #{$mat-form-text-field-infix} {
+    #{ms.$mat-form-text-field-infix} {
         border: none;
     }
 
-    .adf-chip-list#{$mat-form-field} {
-        #{$mat-form-field-infix} {
+    .adf-chip-list#{ms.$mat-form-field} {
+        #{ms.$mat-form-field-infix} {
             padding-top: 14px;
             padding-bottom: 14px;
             min-height: unset;
@@ -35,8 +35,8 @@ adf-search-chip-autocomplete-input {
         padding: 4px 0;
     }
 
-    #{$mat-evolution-chip-set} {
-        #{$mat-evolution-chip} {
+    #{ms.$mat-evolution-chip-set} {
+        #{ms.$mat-evolution-chip} {
             margin-left: 0;
             margin-right: 4px;
         }

package/lib/search/components/search-control.component.scss

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

package/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss

@@ -1,50 +1,50 @@
-@import "styles/mat-selectors";
+@use '../../../../mat-selectors' as ms;
 
 adf-search-date-range {
-  .adf-search-date-range-container {
-    margin-top: 20px;
-    padding: 10px;
+    .adf-search-date-range-container {
+        margin-top: 20px;
+        padding: 10px;
 
-    .adf-search-date-range-form-field-select {
-      width: 180px;
-      min-width: 180px;
-    }
-
-    &-row {
-      display: flex;
-      flex-direction: row;
-      padding-bottom: 21px;
-      align-items: center;
-
-      &-date {
-        margin-top: 8px;
-      }
-
-      #{$mat-select-arrow-wrapper} {
-        height: unset;
-      }
-
-      .adf-search-date-range-input-field {
-        width: 75px;
-      }
-
-      .adf-search-date-range-form-field {
-        padding-left: 10px;
-        flex: 1;
-        margin-bottom: 12px;
-
-        #{$mat-form-field-flex} {
-          align-items: center;
+        .adf-search-date-range-form-field-select {
+            width: 180px;
+            min-width: 180px;
+        }
 
-          #{$mat-form-field-infix} {
-            padding: 0.375em 0 4px;
-          }
+        &-row {
+            display: flex;
+            flex-direction: row;
+            padding-bottom: 21px;
+            align-items: center;
+
+            &-date {
+                margin-top: 8px;
+            }
+
+            #{ms.$mat-select-arrow-wrapper} {
+                height: unset;
+            }
+
+            .adf-search-date-range-input-field {
+                width: 75px;
+            }
+
+            .adf-search-date-range-form-field {
+                padding-left: 10px;
+                flex: 1;
+                margin-bottom: 12px;
+
+                #{ms.$mat-form-field-flex} {
+                    align-items: center;
+
+                    #{ms.$mat-form-field-infix} {
+                        padding: 0.375em 0 4px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
-  .adf-search-widget-extra-width {
-    max-width: 500px;
-  }
+    .adf-search-widget-extra-width {
+        max-width: 500px;
+    }
 }

package/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-date-range-tabbed {
-    #{$mat-tab-header} {
+    #{ms.$mat-tab-header} {
         margin-top: -5px;
     }
 }

package/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors.scss' as ms;
 
 .adf-search-filter-chip {
-    #{$mat-evolution-chip-graphic} {
+    #{ms.$mat-evolution-chip-graphic} {
         display: none;
     }
 

package/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors.scss' as ms;
 
 adf-search-facet-chip-tabbed {
     .adf-search-filter-chip-tabbed {
@@ -6,7 +6,7 @@ adf-search-facet-chip-tabbed {
             pointer-events: none;
         }
 
-        #{$mat-evolution-chip-graphic} {
+        #{ms.$mat-evolution-chip-graphic} {
             display: none;
         }
     }
@@ -16,6 +16,6 @@ adf-search-facet-chip-tabbed {
     }
 }
 
-.adf-search-widget-extra-width#{$mat-menu-panel} {
+.adf-search-widget-extra-width#{ms.$mat-menu-panel} {
     max-width: 500px;
 }

package/lib/search/components/search-filter-chips/search-filter-chips.component.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
@@ -52,15 +52,15 @@
     }
 }
 
-.adf-search-filter-chip#{$mat-evolution-chip}#{$mat-standard-chip} {
+.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-#{$mat-standard-chip} {
+#{ms.$mat-standard-chip} {
     -webkit-font-smoothing: unset;
 }
 
-#{$mat-evolution-chip-set} {
+#{ms.$mat-evolution-chip-set} {
     margin-top: -4px;
 }

package/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-filter {
     &-button:has(.adf-filter-icon) {
@@ -73,7 +73,7 @@
             padding-right: 16px;
             -webkit-font-smoothing: subpixel-antialiased;
 
-            #{$mat-button-label} {
+            #{ms.$mat-button-label} {
                 font-weight: unset;
             }
         }

package/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss

@@ -1,14 +1,14 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-filter-tabbed {
-    #{$mat-tab-header} {
+    #{ms.$mat-tab-header} {
         margin-top: 0;
     }
 
     .adf-search-tab-label-active {
         border-bottom: 1px solid var(--theme-primary-color);
 
-        #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label-text} {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
     }

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

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-form {
     &.adf-search-form-button {
@@ -28,7 +28,7 @@
         text-align: left;
     }
 
-    .adf-search-form-icon#{$mat-icon} {
+    .adf-search-form-icon#{ms.$mat-icon} {
         font-size: 24px;
         height: 24px;
         width: 24px;

package/lib/search/components/search-properties/search-properties.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-properties {
     .adf-search-properties-form {
@@ -9,39 +9,39 @@ adf-search-properties {
                 display: block;
             }
 
-            #{$mat-text-field-no-label} {
-                #{$mat-form-field-infix} {
+            #{ms.$mat-text-field-no-label} {
+                #{ms.$mat-form-field-infix} {
                     padding-top: 9px;
                     padding-bottom: 9px;
                     display: inline-block;
                 }
             }
 
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 height: 37.5px;
                 min-height: 37.5px;
                 display: inline-block;
             }
 
-            #{$mat-select-trigger} {
+            #{ms.$mat-select-trigger} {
                 height: 17.5px;
             }
 
-            #{$mat-select-arrow-wrapper} {
+            #{ms.$mat-select-arrow-wrapper} {
                 width: 16px;
             }
 
-            #{$mat-line-ripple} {
+            #{ms.$mat-line-ripple} {
                 &::before {
                     display: none;
                 }
             }
 
-            #{$mat-select-arrow} {
+            #{ms.$mat-select-arrow} {
                 margin-left: 5px;
             }
 
-            #{$mat-form-field} {
+            #{ms.$mat-form-field} {
                 margin-bottom: 18px;
             }
         }
@@ -49,7 +49,7 @@ adf-search-properties {
         adf-search-chip-autocomplete-input {
             display: block;
 
-            #{$mat-text-field-outlined} {
+            #{ms.$mat-text-field-outlined} {
                 &-start,
                 &-end {
                     border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
@@ -65,15 +65,15 @@ adf-search-properties {
                 }
             }
 
-            #{$mat-focused} {
-                #{$mat-text-field-outlined} {
+            #{ms.$mat-focused} {
+                #{ms.$mat-text-field-outlined} {
                     outline: 2px auto -webkit-focus-ring-color;
                 }
             }
 
-            #{$mat-form-field-appearance-outline} {
-                #{$mat-text-field-outlined-thick} {
-                    #{$mat-text-field-outlined} {
+            #{ms.$mat-form-field-appearance-outline} {
+                #{ms.$mat-text-field-outlined-thick} {
+                    #{ms.$mat-text-field-outlined} {
                         &-start,
                         &-end {
                             border-width: 1px;
@@ -82,11 +82,11 @@ adf-search-properties {
                 }
             }
 
-            #{$mat-notched-outline-leading} {
+            #{ms.$mat-notched-outline-leading} {
                 border-color: var(--adf-theme-foreground-text-color-027);
             }
 
-            #{$mat-notched-outline-trailing} {
+            #{ms.$mat-notched-outline-trailing} {
                 border-color: var(--adf-theme-foreground-text-color-027);
             }
         }
@@ -107,14 +107,14 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
-        &#{$mat-focused} {
-            #{$mat-form-field-infix} {
+        &#{ms.$mat-focused} {
+            #{ms.$mat-form-field-infix} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }

package/lib/search/components/search-text/search-text.component.scss

@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .adf-search-text {
     padding: 0;
 

package/lib/tag/tags-creator/tags-creator.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 adf-tags-creator {
     display: block;
@@ -77,7 +77,7 @@ adf-tags-creator {
                 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);
                 }
@@ -93,7 +93,7 @@ adf-tags-creator {
                 min-height: 62px;
             }
 
-            #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+            #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
                 opacity: 1;
             }
         }

package/lib/version-manager/version-upload.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 .adf-new-version-radio-group {
     display: inline-flex;
@@ -26,11 +26,11 @@
         width: 100%;
         float: right;
 
-        #{$mat-floating-label} {
+        #{ms.$mat-floating-label} {
             padding-bottom: 10px;
         }
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-top: 12px;
             padding-bottom: 0;
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-content-services",
   "description": "Alfresco ADF content services",
-  "version": "8.1.0-14664375052",
+  "version": "8.1.0-14711395239",
   "author": "Hyland Software, Inc. and its affiliates",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
     "@angular/platform-browser": ">=14.1.3",
     "@angular/platform-browser-dynamic": ">=14.1.3",
     "@angular/router": ">=14.1.3",
-    "@alfresco/js-api": ">=9.1.0-14664375052",
+    "@alfresco/js-api": ">=9.1.0-14711395239",
     "@ngx-translate/core": ">=14.0.0",
-    "@alfresco/adf-core": ">=8.1.0-14664375052"
+    "@alfresco/adf-core": ">=8.1.0-14711395239"
   },
   "keywords": [
     "content-services",