mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACS-6693] Angular 15 migration initial point
This commit is contained in:
MichalKinas
@@ -92,8 +92,7 @@ registerLocaleData(localeSv);
|
||||
!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : [],
|
||||
RouterModule.forRoot(APP_ROUTES, {
|
||||
useHash: true,
|
||||
enableTracing: false, // enable for debug only
|
||||
relativeLinkResolution: 'legacy'
|
||||
enableTracing: false // enable for debug only
|
||||
}),
|
||||
AppExtensionsModule,
|
||||
ShellModule.withRoutes({
|
||||
|
||||
42
package.json
42
package.json
@@ -34,24 +34,24 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@alfresco/adf-content-services": "6.9.0-8694813215",
|
||||
"@alfresco/adf-core": "6.9.0-8694813215",
|
||||
"@alfresco/adf-extensions": "6.9.0-8694813215",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "6.9.0-8694813215",
|
||||
"@alfresco/js-api": "7.8.0-8694813215",
|
||||
"@angular/animations": "14.1.3",
|
||||
"@angular/cdk": "14.1.3",
|
||||
"@angular/common": "14.1.3",
|
||||
"@angular/compiler": "14.1.3",
|
||||
"@angular/core": "14.1.3",
|
||||
"@angular/forms": "14.1.3",
|
||||
"@angular/material": "14.1.3",
|
||||
"@angular/material-date-fns-adapter": "14.1.3",
|
||||
"@angular/platform-browser": "14.1.3",
|
||||
"@angular/platform-browser-dynamic": "14.1.3",
|
||||
"@angular/router": "14.1.3",
|
||||
"@alfresco/adf-content-services": "6.8.0-8186121470",
|
||||
"@alfresco/adf-core": "6.8.0-8186121470",
|
||||
"@alfresco/adf-extensions": "6.8.0-8186121470",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "6.8.0-8186121470",
|
||||
"@alfresco/js-api": "7.7.0-8186121470",
|
||||
"@angular/animations": "15.2.10",
|
||||
"@angular/cdk": "15.2.9",
|
||||
"@angular/common": "15.2.10",
|
||||
"@angular/compiler": "15.2.10",
|
||||
"@angular/core": "15.2.10",
|
||||
"@angular/forms": "15.2.10",
|
||||
"@angular/material": "15.2.9",
|
||||
"@angular/material-date-fns-adapter": "15.2.9",
|
||||
"@angular/platform-browser": "15.2.10",
|
||||
"@angular/platform-browser-dynamic": "15.2.10",
|
||||
"@angular/router": "15.2.10",
|
||||
"@fontsource/open-sans": "^5.0.27",
|
||||
"@mat-datetimepicker/core": "^10.1.1",
|
||||
"@mat-datetimepicker/core": "11.0.3",
|
||||
"@ngrx/effects": "^14.2.0",
|
||||
"@ngrx/router-store": "^14.2.0",
|
||||
"@ngrx/store": "^14.2.0",
|
||||
@@ -66,7 +66,7 @@
|
||||
"zone.js": "0.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alfresco/adf-cli": "6.9.0-8694813215",
|
||||
"@alfresco/adf-cli": "6.8.0-8186121470",
|
||||
"@angular-devkit/build-angular": "14.2.11",
|
||||
"@angular-devkit/core": "14.1.2",
|
||||
"@angular-devkit/schematics": "14.1.2",
|
||||
@@ -76,8 +76,8 @@
|
||||
"@angular-eslint/schematics": "14.4.0",
|
||||
"@angular-eslint/template-parser": "^15.2.1",
|
||||
"@angular/cli": "14.1.3",
|
||||
"@angular/compiler-cli": "14.1.3",
|
||||
"@angular/language-service": "14.1.3",
|
||||
"@angular/compiler-cli": "15.2.10",
|
||||
"@angular/language-service": "15.2.10",
|
||||
"@cspell/eslint-plugin": "^8.3.2",
|
||||
"@nx/angular": "17.0.2",
|
||||
"@nx/eslint-plugin": "17.0.2",
|
||||
@@ -128,7 +128,7 @@
|
||||
"stylelint-config-standard-scss": "^7.0.1",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsconfig-paths": "4.2.0",
|
||||
"typescript": "4.7.4",
|
||||
"typescript": "4.9.5",
|
||||
"webdriver-manager": "12.1.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<form class="aca-rule-action__form" [formGroup]="form">
|
||||
|
||||
<mat-form-field class="aca-rule-action-full-width" appearance="standard">
|
||||
<mat-form-field class="aca-rule-action-full-width">
|
||||
<mat-select
|
||||
formControlName="actionDefinitionId"
|
||||
data-automation-id="rule-action-select"
|
||||
|
||||
@@ -62,7 +62,7 @@ describe('RuleOptionsUiComponent', () => {
|
||||
TestBed.configureTestingModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [FormsModule, ReactiveFormsModule, CoreTestingModule, RuleOptionsUiComponent],
|
||||
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }]
|
||||
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'auto' } }]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(RuleOptionsUiComponent);
|
||||
@@ -153,7 +153,7 @@ describe('RuleOptionsUiComponent', () => {
|
||||
expect((await matOptions[2].getText()).trim()).toBe('Script 2');
|
||||
});
|
||||
|
||||
it('should always show a label for the error script dropdown even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to never', () => {
|
||||
it('should always show a label for the error script dropdown even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to auto', () => {
|
||||
component.writeValue({
|
||||
isEnabled: true,
|
||||
isInheritable: false,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__name">
|
||||
<label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
|
||||
<input
|
||||
id="rule-details-name-input"
|
||||
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__description">
|
||||
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
|
||||
<textarea
|
||||
class="aca-rule-details__form__row__field__textarea"
|
||||
id="rule-details-description-textarea"
|
||||
|
||||
@@ -75,14 +75,16 @@
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
&.aca-read-only,
|
||||
.mat-form-field-disabled {
|
||||
.mat-form-field-underline,
|
||||
.mat-select-arrow-wrapper {
|
||||
display: none;
|
||||
.mat-mdc-form-field-disabled {
|
||||
.mdc-line-ripple {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*:disabled,
|
||||
.mat-select-disabled .mat-select-value {
|
||||
.mat-mdc-select-disabled .mat-mdc-select-value {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
|
||||
standalone: true,
|
||||
imports: [MatCardModule, NodeCommentsModule],
|
||||
selector: 'app-comments-tab',
|
||||
template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
|
||||
template: `<mat-card appearance="raised"><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CommentsTabComponent implements OnInit {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<mat-card *ngIf="node">
|
||||
<mat-card appearance="raised" *ngIf="node">
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" autocomplete="off">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
|
||||
<mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
|
||||
<input
|
||||
matInput
|
||||
#searchInput
|
||||
|
||||
@@ -24,11 +24,6 @@ $top-margin: 12px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-input-form-field-input + span {
|
||||
cursor: text;
|
||||
pointer-events: auto;
|
||||
@@ -41,6 +36,14 @@ $top-margin: 12px;
|
||||
&-input {
|
||||
letter-spacing: -0.7px;
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.mdc-line-ripple {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-button {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
|
||||
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
|
||||
<mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
|
||||
<input
|
||||
matInput
|
||||
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
|
||||
|
||||
@@ -85,12 +85,6 @@ $top-margin: 12px;
|
||||
&-checkbox {
|
||||
padding: 3px 24px 3px 19px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-checkbox-inner-container {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
label {
|
||||
padding: 0 0 0 11px;
|
||||
|
||||
@@ -11,24 +11,19 @@ $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat.define-palette($aca-warn, A100);
|
||||
$app-typography: mat.define-typography-config(
|
||||
$font-family: 'Open Sans',
|
||||
$display-4: mat.define-typography-level(112px, 112px, 300),
|
||||
$display-3: mat.define-typography-level(56px, 56px, 400),
|
||||
$display-2: mat.define-typography-level(45px, 48px, 400),
|
||||
$display-1: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline: mat.define-typography-level(24px, 32px, 400),
|
||||
$title: mat.define-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat.define-typography-level(16px, 28px, 400),
|
||||
$subheading-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$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, 400),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-1: mat.define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.define-typography-level(12px, 20px, 400),
|
||||
$button: mat.define-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
$input: mat.define-typography-level(inherit, 1.25, 400)
|
||||
$button: mat.define-typography-level(14px, 14px, 500)
|
||||
);
|
||||
|
||||
@include mat.core($app-typography);
|
||||
|
||||
$custom-theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@mixin ay11-theme() {
|
||||
.mat-icon-button,
|
||||
.mat-button,
|
||||
.mat-checkbox,
|
||||
.mat-raised-button {
|
||||
.mat-mdc-icon-button,
|
||||
.mat-mdc-button,
|
||||
.mat-mdc-checkbox,
|
||||
.mat-mdc-raised-button {
|
||||
&:focus-visible {
|
||||
@include rounded-outline;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
.mat-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// TODO check if still applies
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-focus-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-checkbox-ripple {
|
||||
.mat-mdc-checkbox-ripple {
|
||||
@include rounded-outline;
|
||||
|
||||
height: 22px;
|
||||
@@ -28,25 +29,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
|
||||
fill: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-list-base .mat-list-option {
|
||||
.mat-list-item-content {
|
||||
.mat-mdc-list-base .mat-mdc-list-option {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border(transparent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: white;
|
||||
|
||||
.mat-list-item-content {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-user-button.mat-button,
|
||||
.adf-search-user-button.mat-mdc-button,
|
||||
.app-search-button {
|
||||
line-height: 36px;
|
||||
|
||||
@@ -59,9 +64,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-content {
|
||||
.mat-menu-item {
|
||||
.mat-menu-ripple {
|
||||
.mat-mdc-menu-content {
|
||||
.mat-mdc-menu-item {
|
||||
.mat-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -83,15 +88,17 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mat-option {
|
||||
.mat-mdc-option {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-option-ripple {
|
||||
.mat-mdc-option-ripple {
|
||||
@include rounded-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-slide-toggle {
|
||||
// TODO investigate after app is run
|
||||
.mat-mdc-slide-toggle {
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@@ -99,40 +106,46 @@
|
||||
background-color: #484a4d;
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-bar {
|
||||
border-radius: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-thumb-container {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-bar {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-stroked-button,
|
||||
.mat-flat-button {
|
||||
.mat-mdc-outlined-button,
|
||||
.mat-mdc-unelevated-button {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-ripple.mat-ripple {
|
||||
.mat-mdc-button-ripple.mat-ripple {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
inset: -4px;
|
||||
}
|
||||
@@ -160,7 +173,7 @@
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
|
||||
.mat-button-base.mat-button {
|
||||
.mat-mdc-button-base.mat-mdc-button {
|
||||
outline: none;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
@@ -182,8 +195,8 @@
|
||||
.adf-error-snackbar {
|
||||
background-color: #ba1b1b;
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
.mat-mdc-simple-snack-bar,
|
||||
.mat-mdc-snack-bar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -191,13 +204,13 @@
|
||||
.adf-info-snackbar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
.mat-mdc-simple-snack-bar,
|
||||
.mat-mdc-snack-bar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-base {
|
||||
.mat-mdc-button-base {
|
||||
&.adf-filter-button {
|
||||
margin-left: -2px;
|
||||
}
|
||||
@@ -207,7 +220,7 @@
|
||||
&__perpage-block,
|
||||
&__actualinfo-block {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.mat-icon-button {
|
||||
.mat-mdc-icon-button {
|
||||
left: 3px;
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@@ -13,19 +13,17 @@ mat-toolbar {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
.mat-tab-label {
|
||||
&.mat-tab-label-active {
|
||||
color: #212121;
|
||||
}
|
||||
.mat-mdc-tab-list {
|
||||
.mat-mdc-tab-labels {
|
||||
.mdc-tab--active {
|
||||
color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-label-wrapper .mat-form-field-label,
|
||||
.mat-tab-list .mat-tab-labels .mat-tab-label,
|
||||
.mat-checkbox-label,
|
||||
.mdc-floating-label,
|
||||
.mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab,
|
||||
.mat-mdc-checkbox label,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
color: var(--theme-secondary-text);
|
||||
|
||||
Reference in New Issue
Block a user