@alfresco/adf-core 7.1.0-15303058550 → 8.0.1

package/lib/styles/_index.scss

@@ -1,17 +1,14 @@
 /* stylelint-disable value-keyword-case */
 @use '@angular/material' as mat;
+@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 /* stylelint-disable value-list-max-empty-lines */
 /* stylelint-disable scss/no-global-function-names */
 /* stylelint-disable scss/at-import-partial-extension */
-@import '../styles/colors';
-@import '../styles/mixins';
-@import '../styles/mat-selectors';
+@import './mixins';
+@import './mat-selectors';
 @import '../form/components/widgets/form.theme';
 @import '../clipboard/clipboard.theme';
-@import './snackbar.theme';
 @import './material.theme';
-@import './components-variables';
-@import '../../../../../node_modules/@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 
 @mixin alfresco-material-theme($theme) {
     @include adf-core-theme($theme);
@@ -28,72 +25,85 @@
     // map SCSS variables to expose as CSS variables
     $defaults: (
         // theme colors
-        --theme-primary-color: mat.get-color-from-palette($primary),
-        --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
-        --theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
-        --adf-theme-primary-50: mat.get-color-from-palette($primary, 50),
-        --adf-theme-primary-100: mat.get-color-from-palette($primary, 100),
-        --adf-theme-primary-300: mat.get-color-from-palette($primary, 300),
-        --adf-theme-primary-900: mat.get-color-from-palette($primary, 900),
-        --theme-warn-color: mat.get-color-from-palette($warn),
-        --theme-warn-color-a700: mat.get-color-from-palette($warn, A700),
-        --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
-        --theme-accent-color: mat.get-color-from-palette($accent),
-        --theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
-        --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
-        --theme-accent-500: mat.get-color-from-palette($accent, 500),
-        --adf-theme-foreground-base-color: mat.get-color-from-palette($foreground, base),
-        --adf-theme-foreground-base-color-065: mat.get-color-from-palette($foreground, base, 0.65),
-        --adf-theme-foreground-base-color-045: mat.get-color-from-palette($foreground, base, 0.45),
-        --adf-theme-foreground-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
-        --adf-theme-foreground-divider-color: mat.get-color-from-palette($foreground, divider),
-        --adf-theme-foreground-icon-color: mat.get-color-from-palette($foreground, icon),
-        --adf-theme-foreground-icon-color-054: mat.get-color-from-palette($foreground, icon, 0.54),
-        --adf-theme-foreground-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-theme-foreground-text-color: mat.get-color-from-palette($foreground, text),
-        --adf-theme-foreground-text-color-087: mat.get-color-from-palette($foreground, text, 0.87),
-        --adf-theme-foreground-text-color-075: mat.get-color-from-palette($foreground, text, 0.75),
-        --adf-theme-foreground-text-color-064: mat.get-color-from-palette($foreground, text, 0.64),
-        --adf-theme-foreground-text-color-054: mat.get-color-from-palette($foreground, text, 0.54),
-        --adf-theme-foreground-text-color-040: mat.get-color-from-palette($foreground, text, 0.4),
-        --adf-theme-foreground-text-color-027: mat.get-color-from-palette($foreground, text, 0.27),
-        --adf-theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25),
-        --adf-theme-foreground-text-color-014: mat.get-color-from-palette($foreground, text, 0.14),
-        --adf-theme-foreground-text-color-007: mat.get-color-from-palette($foreground, text, 0.07),
-        --adf-theme-background-card-color: mat.get-color-from-palette($background, card),
-        --adf-theme-background-card-color-087: mat.get-color-from-palette($background, card, 0.87),
-        --theme-background-color: mat.get-color-from-palette($background, background),
-        --adf-theme-background-dialog-color: mat.get-color-from-palette($background, dialog),
-        --adf-theme-background-hover-color: mat.get-color-from-palette($background, hover),
-        --adf-theme-background-selected-button-color: mat.get-color-from-palette($background, selected-button),
-        --adf-theme-background-status-bar-color: mat.get-color-from-palette($background, status-bar),
-        --adf-theme-background-unselected-chip-color: mat.get-color-from-palette($background, unselected-chip),
+        --theme-primary-color: mat.m2-get-color-from-palette($primary),
+        --theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
+        --theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
+        --adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
+        --adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
+        --adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
+        --adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
+        --theme-warn-color: mat.m2-get-color-from-palette($warn),
+        --theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
+        --theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
+        --theme-accent-color: mat.m2-get-color-from-palette($accent),
+        --theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
+        --theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
+        --theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
+        --adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
+        --adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
+        --adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
+        --adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
+        --adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
+        --adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
+        --adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
+        --adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
+        --adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
+        --adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
+        --adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
+        --adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
+        --adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
+        --adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
+        --adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
+        --adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
+        --adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
+        --adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
+        --adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
+        --adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
+        --theme-background-color: mat.m2-get-color-from-palette($background, background),
+        --adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
+        --adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
+        --adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
+        --adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
+        --adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
         // typography
-        --theme-font-family: mat.font-family($typography),
+        --theme-font-family: mat.m2-font-family($typography),
         --theme-font-weight: normal,
-        --theme-body-1-font-size: mat.font-size($typography, body-2),
-        --theme-body-2-font-size: mat.font-size($typography, subtitle-2),
-        --theme-body-1-line-height: mat.line-height($typography, body-2),
-        --theme-display-1-font-size: mat.font-size($typography, headline-4),
-        --theme-display-3-font-size: mat.font-size($typography, headline-2),
-        --theme-display-4-font-size: mat.font-size($typography, headline-1),
-        --theme-caption-font-size: mat.font-size($typography, caption),
-        --theme-title-font-size: mat.font-size($typography, headline-6),
-        --theme-subheading-1-font-size: mat.font-size($typography, body-1),
-        --theme-subheading-2-font-size: mat.font-size($typography, subtitle-1),
-        --theme-button-font-size: mat.font-size($typography, button),
-        --theme-headline-font-size: mat.font-size($typography, headline-5),
-        --theme-headline-line-height: mat.line-height($typography, headline-5),
+        --theme-body-1-font-size: mat.m2-font-size($typography, body-2),
+        --theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
+        --theme-body-1-line-height: mat.m2-line-height($typography, body-2),
+        --theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
+        --theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
+        --theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
+        --theme-caption-font-size: mat.m2-font-size($typography, caption),
+        --theme-title-font-size: mat.m2-font-size($typography, headline-6),
+        --theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
+        --theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
+        --theme-button-font-size: mat.m2-font-size($typography, button),
+        --theme-headline-font-size: mat.m2-font-size($typography, headline-5),
+        --theme-headline-line-height: mat.m2-line-height($typography, headline-5),
         --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
         --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
         --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
         --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
         // specific colors
-        --adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
-        --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
-        --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
+        --adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
+        --adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
+        --adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
         // spacing
-        --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
+        --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
+        // components
+        --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
+        --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
+        --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
+        --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
+        --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
+        --adf-metadata-property-panel-title-color: rgb(33, 33, 33),
+        --adf-error-color: #ba1b1b,
+        --adf-secondary-button-background: #2121210d,
+        --adf-secondary-modal-text-color: #212121,
+        --adf-disabled-button-background: rgba(0, 0, 0, 0.12),
+        --adf-chip-border-color: #757575,
+        --adf-sidenav-active-text-color: rgba(0, 48, 100, 1)
     );
 
     // propagates SCSS variables into the CSS variables scope
@@ -103,10 +113,8 @@
         }
     }
 
-    @include mat-datetimepicker-theme($theme);
-    @include adf-snackbar-theme;
+    @include datetimepicker-theme.mat-datetimepicker-theme($theme);
     @include adf-material-theme;
-    @include adf-components-variables($theme);
 }
 
 $adf-custom-theme-sizes: (

package/lib/styles/_mat-selectors.scss

@@ -1,41 +1,24 @@
-$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-body-content: '.mat-mdc-tab-body-content';
 $mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
+$mat-tab-body-content: '.mat-mdc-card-content';
 $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';
@@ -44,37 +27,22 @@ $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';
@@ -86,103 +54,42 @@ $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';
+$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';

package/lib/styles/_theming.scss

@@ -1,5 +1,3 @@
-@import '../styles/colors';
-@import '../styles/mixins';
-@import '../styles/typography';
-@import '../styles/mat-selectors';
-
+@import './mixins';
+@import './typography';
+@import './mat-selectors';

package/lib/styles/_typography.scss

@@ -1,18 +1,18 @@
 @use '@angular/material' as mat;
 
-$alfresco-typography: mat.define-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
-    $headline-1: mat.define-typography-level(112px, 112px, 300),
-    $headline-2: mat.define-typography-level(56px, 56px, 400),
-    $headline-3: mat.define-typography-level(45px, 48px, 400),
-    $headline-4: mat.define-typography-level(34px, 40px, 400),
-    $headline-5: mat.define-typography-level(24px, 32px, 400),
-    $headline-6: mat.define-typography-level(20px, 32px, 500),
-    $subtitle-1: mat.define-typography-level(16px, 28px, 400),
-    $body-1: mat.define-typography-level(15px, 24px, 400),
-    $subtitle-2: mat.define-typography-level(14px, 24px, 500),
-    $body-2: mat.define-typography-level(14px, 20px, 400),
-    $caption: mat.define-typography-level(12px, 20px, 400),
-    $button: mat.define-typography-level(14px, 14px, 500),
+$alfresco-typography: mat.m2-define-typography-config(
+    $font-family: 'Roboto, "Helvetica Neue", sans-serif',
+    $headline-1: mat.m2-define-typography-level(112px, 112px, 300),
+    $headline-2: mat.m2-define-typography-level(56px, 56px, 400),
+    $headline-3: mat.m2-define-typography-level(45px, 48px, 400),
+    $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
+    $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
+    $headline-6: mat.m2-define-typography-level(20px, 32px, 500),
+    $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
+    $body-1: mat.m2-define-typography-level(15px, 24px, 400),
+    $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
+    $body-2: mat.m2-define-typography-level(14px, 20px, 400),
+    $caption: mat.m2-define-typography-level(12px, 20px, 400),
+    $button: mat.m2-define-typography-level(14px, 14px, 500),
     // Line-height must be unit-less fraction of the font-size.
 );

package/lib/styles/material.theme.scss

@@ -1,18 +1,18 @@
-@import './mat-selectors';
+@use './mat-selectors' as ms;
 
 @mixin adf-material-theme() {
-    #{$mat-expansion-panel} {
-        & #{$mat-expansion-panel-header}.cdk-keyboard-focused,
-        & #{$mat-expansion-panel-header}.cdk-program-focused,
-        &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover {
+    #{ms.$mat-expansion-panel} {
+        & #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
+        & #{ms.$mat-expansion-panel-header}.cdk-program-focused,
+        &:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover {
             &:not([aria-disabled='true']) {
                 background-color: var(--adf-theme-background-hover-color);
             }
         }
     }
 
-    #{$mat-calendar} {
-        #{$mat-calendar-header} {
+    #{ms.$mat-calendar} {
+        #{ms.$mat-calendar-header} {
             button {
                 color: var(--adf-theme-foreground-text-color-087);
 
@@ -22,68 +22,69 @@
             }
         }
 
-        #{$mat-calendar-content} {
-            #{$mat-calendar-table-header} th {
+        #{ms.$mat-calendar-content} {
+            #{ms.$mat-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            #{$mat-calendar-body-disabled} > div {
+            #{ms.$mat-calendar-body-disabled} > div {
+                /* stylelint-disable-next-line declaration-no-important */
                 color: var(--adf-theme-foreground-text-color-054) !important;
             }
         }
     }
 
-    .mat-datetimepicker-calendar {
-        .mat-datetimepicker-calendar-header {
-            .mat-datetimepicker-calendar-header-year {
+    #{ms.$mat-datetimepicker-calendar} {
+        #{ms.$mat-datetimepicker-calendar-header} {
+            #{ms.$mat-datetimepicker-calendar-header-year} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-date {
+            #{ms.$mat-datetimepicker-calendar-header-date} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-time {
+            #{ms.$mat-datetimepicker-calendar-header-time} {
                 opacity: 1;
             }
         }
 
-        .mat-datetimepicker-calendar-content {
-            .mat-datetimepicker-calendar-table-header th {
+        #{ms.$mat-datetimepicker-calendar-content} {
+            #{ms.$mat-datetimepicker-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            .mat-datetimepicker-calendar-body-disabled > div {
+            #{ms.$mat-datetimepicker-calendar-body-disabled} > div {
                 color: var(--adf-theme-foreground-text-color-054);
             }
         }
     }
 
-    #{$mat-snackbar} {
-        &#{$mat-snack-bar-container} {
+    #{ms.$mat-snackbar} {
+        &#{ms.$mat-snack-bar-container} {
             margin: 24px;
 
-            #{$mat-snackbar-label} {
+            #{ms.$mat-snackbar-label} {
                 line-height: unset;
             }
         }
     }
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         &:focus::placeholder {
             color: var(--theme-primary-color);
         }
     }
 
-    #{$mat-datetimepicker-dialog} {
-        #{$mat-dialog-container} {
-            #{$mat-dialog-surface} {
+    #{ms.$mat-datetimepicker-dialog} {
+        #{ms.$mat-dialog-container} {
+            #{ms.$mat-dialog-surface} {
                 padding: 0;
             }
         }
     }
 
-    #{$mat-button-base} {
+    #{ms.$mat-button-base} {
         -webkit-font-smoothing: antialiased;
     }
 }

package/lib/templates/empty-content/empty-content.component.scss

@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .adf-empty-content {
     color: var(--adf-theme-foreground-text-color-054);
     display: flex;

package/lib/templates/error-content/error-content.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-error-content {
     color: var(--adf-theme-foreground-text-color-054);
@@ -36,7 +36,7 @@
     }
 }
 
-@include layout-bp(lt-md) {
+@include flex.layout-bp(lt-md) {
     .adf-error-content {
         &-code {
             margin-top: 100px;

package/lib/testing/core.testing.module.d.ts

@@ -3,6 +3,7 @@ import * as i1 from "@angular/platform-browser/animations";
 import * as i2 from "../core.module";
 import * as i3 from "./noop-translate.module";
 import * as i4 from "./noop-auth.module";
+/** @deprecated this module is deprecated and will be removed in the future */
 export declare class CoreTestingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CoreTestingModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<CoreTestingModule, never, [typeof i1.NoopAnimationsModule, typeof i2.CoreModule, typeof i3.NoopTranslateModule, typeof i4.NoopAuthModule], never>;

package/lib/testing/noop-translate.module.d.ts

@@ -2,7 +2,6 @@ import { TranslationService } from '../translation/translation.service';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common/http/testing";
-import * as i2 from "@ngx-translate/core";
 export declare class NoopTranslationService implements TranslationService {
     defaultLang: string;
     userLang: string;
@@ -19,6 +18,6 @@ export declare class NoopTranslationService implements TranslationService {
 }
 export declare class NoopTranslateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NoopTranslateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NoopTranslateModule, never, [typeof i1.HttpClientTestingModule, typeof i2.TranslateModule], [typeof i2.TranslateModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NoopTranslateModule, never, [typeof i1.HttpClientTestingModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NoopTranslateModule>;
 }

package/lib/translation/provide-i18n.d.ts

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EnvironmentProviders, Provider } from '@angular/core';
+export interface ProvideI18NConfig {
+    /**
+     * The default language to use for translations.
+     * If not provided, it defaults to 'en'.
+     */
+    defaultLanguage?: string;
+    /**
+     * An array of assets to be used for i18n, where each asset is a tuple containing an identifier and a path.
+     * Example: [['en', '/assets/i18n/en.json'], ['fr', '/assets/i18n/fr.json']]
+     */
+    assets?: [string, string][];
+}
+/**
+ * Provides the i18n service.
+ * This function is used to provide the i18n service in the application.
+ * It is recommended to use this function in the top-level `AppModule` to ensure that the i18n service is available throughout the application.
+ *
+ * @param config - Configuration for the i18n service.
+ * @param config.assets - An array of assets to be used for i18n, where each asset is a tuple containing an identifier and a path.
+ * @returns An array of providers for the i18n service.
+ */
+export declare function provideI18N(config?: ProvideI18NConfig): (Provider | EnvironmentProviders)[];

package/lib/translation/public-api.d.ts

@@ -16,3 +16,4 @@
  */
 export * from './translation.service';
 export * from './translate-loader.service';
+export * from './provide-i18n';

package/lib/viewer/components/img-viewer/img-viewer.component.d.ts

@@ -17,6 +17,7 @@ export declare class ImgViewerComponent implements AfterViewInit, OnChanges, OnD
     error: EventEmitter<any>;
     submit: EventEmitter<any>;
     isSaving: EventEmitter<boolean>;
+    imageLoaded: EventEmitter<void>;
     imageElement: ElementRef;
     onKeyDown(event: KeyboardEvent): void;
     fullScreenChangeHandler(): void;
@@ -38,5 +39,5 @@ export declare class ImgViewerComponent implements AfterViewInit, OnChanges, OnD
     updateCanvasContainer(): void;
     onImageError(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImgViewerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImgViewerComponent, "adf-img-viewer", never, { "showToolbar": { "alias": "showToolbar"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "allowedEditActions": { "alias": "allowedEditActions"; "required": false; }; "urlFile": { "alias": "urlFile"; "required": false; }; "blobFile": { "alias": "blobFile"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; }, { "error": "error"; "submit": "submit"; "isSaving": "isSaving"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImgViewerComponent, "adf-img-viewer", never, { "showToolbar": { "alias": "showToolbar"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "allowedEditActions": { "alias": "allowedEditActions"; "required": false; }; "urlFile": { "alias": "urlFile"; "required": false; }; "blobFile": { "alias": "blobFile"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; }, { "error": "error"; "submit": "submit"; "isSaving": "isSaving"; "imageLoaded": "imageLoaded"; }, never, never, true, never>;
 }