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

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);
 }

package/lib/form/components/widgets/form.theme.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable no-descending-specificity */
-@import 'styles/mat-selectors';
+/* stylelint-disable declaration-no-important */
+@use '../../../styles/mat-selectors' as ms;
 
 ul > li > form-field > .adf-focus {
     .adf-label {
@@ -36,15 +37,15 @@ ul > li > form-field > .adf-focus {
     }
 
     &-invalid {
-        #{$mat-checkbox} {
+        #{ms.$mat-checkbox} {
             padding-bottom: 12px;
         }
 
-        #{$mat-line-ripple} {
+        #{ms.$mat-line-ripple} {
             background-color: var(--theme-warn-color) !important;
         }
 
-        #{$mat-select} {
+        #{ms.$mat-select} {
             &-arrow {
                 color: var(--adf-theme-foreground-secondary-text-color) !important;
             }
@@ -54,7 +55,7 @@ ul > li > form-field > .adf-focus {
             border-color: var(--theme-warn-color);
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
 
@@ -71,9 +72,9 @@ ul > li > form-field > .adf-focus {
 /* query for Microsoft IE 11 */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     adf-form-field {
-        #{$mat-input-element},
-        #{$mat-select},
-        #{$mat-form-field} {
+        #{ms.$mat-input-element},
+        #{ms.$mat-select},
+        #{ms.$mat-form-field} {
             display: block !important;
         }
     }

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

@@ -1,11 +1,11 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-text-widget {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 20px;
         }
     }

package/lib/identity-user-info/identity-user-info.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../styles/flex' as flex;
 
 .adf {
     &-userinfo-container {
@@ -14,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @include layout-bp(lt-md) {
+        @include flex.layout-bp(lt-md) {
             display: none;
         }
     }
@@ -65,7 +65,7 @@
         display: flex;
         flex-direction: column;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             padding: 10px;
         }
     }

package/lib/info-drawer/info-drawer-layout.component.scss

@@ -1,5 +1,5 @@
-@import '../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../styles/mixins' as mixins;
+@use '../styles/mat-selectors' as ms;
 
 $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
@@ -7,25 +7,25 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
 .adf {
     &-info-drawer {
-        @include flex-column;
+        @include mixins.flex-column;
     }
 
     &-info-drawer-layout {
-        @include flex-column;
+        @include mixins.flex-column;
 
         overflow: auto;
         width: 100%;
         background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-        & #{$mat-tab-label-text} {
+        & #{ms.$mat-tab-label-text} {
             font-weight: bold;
             text-align: left;
             opacity: 1;
         }
 
-        #{$mat-tab-label}#{$mat-tab-label-active} {
-            & #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
+            & #{ms.$mat-tab-label-text} {
                 color: inherit;
             }
         }
@@ -75,7 +75,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 margin-bottom: 0;
             }
 
-            .adf-info-drawer-tabs #{$mat-tab-body-content} {
+            .adf-info-drawer-tabs #{ms.$mat-tab-body-content} {
                 .adf-manage-versions-empty,
                 .adf-manage-versions-no-permission {
                     margin: 0;

package/lib/info-drawer/info-drawer.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf {
     &-info-drawer {
@@ -7,7 +7,7 @@
             margin: 0;
         }
 
-        #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label-text} {
             min-width: 0;
         }
 
@@ -31,28 +31,28 @@
                 }
 
                 .adf-info-drawer-tabs {
-                    & #{$mat-tab-body-content} > * {
+                    & #{ms.$mat-tab-body-content} > * {
                         margin-bottom: 20px;
                         display: block;
                     }
 
-                    & #{$mat-tab-body-content} > *:last-child {
+                    & #{ms.$mat-tab-body-content} > *:last-child {
                         margin-bottom: 0;
                     }
 
-                    #{$mat-tab-label-text} {
+                    #{ms.$mat-tab-label-text} {
                         flex-grow: 1;
 
-                        #{$mat-icon} + span {
+                        #{ms.$mat-icon} + span {
                             padding-left: 5px;
                         }
                     }
 
-                    #{$mat-tab-body} {
+                    #{ms.$mat-tab-body} {
                         overflow-y: hidden;
                     }
 
-                    #{$mat-tab-body-content} {
+                    #{ms.$mat-tab-body-content} {
                         /* stylelint-disable */
                         overflow: auto;
                         /* stylelint-enable */
@@ -65,7 +65,7 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .adf-info-drawer-tabs {
-    #{$mat-tab-label-container} {
+    #{ms.$mat-tab-label-container} {
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     }
 
@@ -75,7 +75,7 @@
         border-bottom: unset;
         opacity: 1;
 
-        &#{$mat-tab-label} {
+        &#{ms.$mat-tab-label} {
             flex-grow: 1;
         }
 

package/lib/layout/components/header/header.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../styles/flex' as flex;
 
 adf-layout-header .adf-toolbar-container-row {
     color: var(--theme-header-text-color);
@@ -51,7 +51,7 @@ adf-layout-header .adf-toolbar-container-row {
         padding: 0;
     }
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         .adf-app-logo,
         .adf-app-title {
             display: none;

package/lib/layout/components/layout-container/layout-container.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 adf-layout-container {
     display: block;
@@ -34,8 +34,8 @@ adf-layout-container {
 }
 
 /* stylelint-disable selector-class-pattern, declaration-no-important */
-#{$mat-sidenav-content},
-#{$mat-drawer-transition} #{$mat-drawer-content} {
+#{ms.$mat-sidenav-content},
+#{ms.$mat-drawer-transition} #{ms.$mat-drawer-content} {
     margin-left: 0 !important;
     margin-right: 0 !important;
     transform: unset !important;

package/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,6 +1,6 @@
 @use '../../../styles/flex' as flex;
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-sidenav-layout {
     &-full-space {
@@ -13,7 +13,7 @@
         width: 100%;
     }
 
-    @include flex-column;
+    @include mixins.flex-column;
 
     width: 100%;
 
@@ -25,15 +25,15 @@
         flex: 0 0;
     }
 
-    #{$mat-drawer-content} {
-        @include flex-column;
+    #{ms.$mat-drawer-content} {
+        @include mixins.flex-column;
 
         position: unset;
         overflow: auto;
     }
 
     .adf-layout-container-sidenav {
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
             vertical-align: sub;
         }
     }

package/lib/login/components/login/login.component.scss

@@ -1,8 +1,8 @@
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-login {
-    @include flex-column;
+    @include mixins.flex-column;
 }
 
 .adf-login-content {
@@ -204,7 +204,7 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 min-height: 0;
                 padding-bottom: 3px;
                 padding-top: 20px;
@@ -213,7 +213,7 @@
                     font-size: var(--theme-subheading-2-font-size);
                 }
 
-                #{$mat-floating-label-required} {
+                #{ms.$mat-floating-label-required} {
                     &::after {
                         font-size: var(--theme-subheading-2-font-size);
                     }

package/lib/notifications/components/notification-history.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 $notification-item-height: 72px;
 
@@ -8,7 +8,7 @@ $notification-item-height: 72px;
         -webkit-font-smoothing: subpixel-antialiased;
     }
 
-    &-notification-history-menu_button#{$mat-button} {
+    &-notification-history-menu_button#{ms.$mat-button} {
         border-radius: 90%;
         padding: 0;
         min-width: 40px;
@@ -154,11 +154,11 @@ $notification-item-height: 72px;
     }
 }
 
-#{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
+#{ms.$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
     min-width: 320px;
     max-height: 500px;
 
-    #{$mat-menu-content} {
+    #{ms.$mat-menu-content} {
         padding: 0;
     }
 }

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

@@ -1,11 +1,11 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf-search-container {
     &:has(.adf-input-form-field-divider) {
         overflow: hidden;
     }
 
-    #{$mat-form-field-subscript-wrapper} {
+    #{ms.$mat-form-field-subscript-wrapper} {
         display: none;
     }
 

package/lib/snackbar-content/snackbar-content.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 :host {
     display: flex;
@@ -20,7 +20,7 @@
         display: flex;
         flex-direction: row;
 
-        #{$mat-button} {
+        #{ms.$mat-button} {
             min-width: 0;
             margin: -8px;
             height: unset;

package/lib/styles/_mat-selectors.scss

@@ -186,3 +186,13 @@ $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';
+$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
+$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
+$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
+$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year';
+$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date';
+$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time';
+$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
+$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
+$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
+$mat-form-field-underline: '.mat-form-field-underline';