[ACS-6849][ACA] Upgrade to Angular 17 (#4275)

2025-07-24 17:31:52 +00:00 · 2025-02-12 14:42:09 +01:00
parent b013818649
commit a70378bffc
19 changed files with 7686 additions and 6045 deletions
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -114,6 +114,7 @@

    .aca-rule-details__form__row #{$mat-form-field-flex} #{$mat-form-field-infix} {
      padding-bottom: 0.375em;
+      padding-top: 24px;
    }

    .aca-rule-details__form__row aca-rule-action #{$mat-form-field-flex} #{$mat-form-field-infix} {
--- a/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.spec.ts
+++ b/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.spec.ts
@@ -76,9 +76,8 @@ describe('RuleSetPickerSmartComponent', () => {
    folderRuleSetsService = TestBed.inject(FolderRuleSetsService);
    fixture = TestBed.createComponent(RuleSetPickerSmartComponent);
    component = fixture.componentInstance;
-    component['folderRuleSetsService'] = folderRuleSetsService;

-    loadRuleSetsSpy = spyOn(folderRuleSetsService, 'loadRuleSets').and.callThrough();
+    loadRuleSetsSpy = spyOn(component.folderRuleSetsService, 'loadRuleSets').and.callThrough();
    callApiSpy = spyOn<any>(folderRuleSetsService, 'callApi');
    callApiSpy
      .withArgs(`/nodes/${dialogOptions.nodeId}/rule-sets?include=isLinkedTo,owningFolder,linkedToBy&skipCount=0&maxItems=100`, 'GET')
--- a/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.ts
+++ b/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.ts
@@ -22,7 +22,7 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, DestroyRef, inject, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
 import { Node } from '@alfresco/js-api';
@@ -75,19 +75,18 @@ export class RuleSetPickerSmartComponent implements OnInit {
  private selectedNodeId = '';
  private folderLoading$ = new BehaviorSubject<boolean>(true);

+  public readonly data: RuleSetPickerOptions = inject(MAT_DIALOG_DATA);
+  public readonly folderRuleSetsService = inject(FolderRuleSetsService);
+  private readonly dialogRef = inject(MatDialogRef<RuleSetPickerSmartComponent>);
+  private readonly notificationService = inject(NotificationService);
+  private readonly destroyRef = inject(DestroyRef);
+
  mainRuleSet$ = this.folderRuleSetsService.mainRuleSet$;
  rulesLoading$ = combineLatest(this.folderRuleSetsService.isLoading$, this.folderLoading$).pipe(
    map(([rulesLoading, folderLoading]) => rulesLoading || folderLoading)
  );

-  private readonly destroyRef = inject(DestroyRef);
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: RuleSetPickerOptions,
-    private folderRuleSetsService: FolderRuleSetsService,
-    private dialogRef: MatDialogRef<RuleSetPickerSmartComponent>,
-    private notificationService: NotificationService
-  ) {
+  constructor() {
    this.nodeId = this.data?.nodeId ?? '-root-';
    this.defaultNodeId = this.data?.defaultNodeId ?? '-root-';
    this.existingRuleSet = this.data?.existingRuleSet ?? null;
--- a/projects/aca-content/src/lib/components/files/files.component.scss
+++ b/projects/aca-content/src/lib/components/files/files.component.scss
@@ -0,0 +1,3 @@
+.adf-document-list-loading-margin {
+  margin: auto;
+}
--- a/projects/aca-content/src/lib/components/files/files.component.ts
+++ b/projects/aca-content/src/lib/components/files/files.component.ts
@@ -86,6 +86,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  ],
  templateUrl: './files.component.html',
  encapsulation: ViewEncapsulation.None,
+  styleUrl: './files.component.scss',
  selector: 'aca-files'
 })
 export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
@@ -9,6 +9,7 @@ app-library-metadata-form {

      .mat-mdc-form-field-infix {
        padding-bottom: 3px;
+        min-height: unset;
      }
    }

--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
@@ -40,7 +40,7 @@
    }
  }

-  &__section {
+  .aca-sidenav__section {
    overflow-y: auto;

    .aca-expansion-panel {
@@ -126,9 +126,10 @@
      width: 100%;
    }

-    &__actions {
+    .aca-sidenav__section__actions {
      &__item:has(span) {
        padding: 0;
+        height: 100%;

        span {
          pointer-events: auto;
--- a/projects/aca-content/src/lib/ui/overrides/ay11.scss
+++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -44,7 +44,7 @@
  }

  .mat-mdc-form-field-focus-overlay {
-    background-color: transparent;
+    --mat-form-field-state-layer-color: transparent;
  }

  .mdc-menu-surface.mat-mdc-autocomplete-panel:is(div),
--- a/projects/aca-content/src/lib/ui/theme.scss
+++ b/projects/aca-content/src/lib/ui/theme.scss
@@ -8,6 +8,9 @@

 :root {
  --mdc-filled-text-field-container-color: transparent;
+  --mdc-text-button-label-text-color: inherit;
+  --mat-toolbar-container-text-color: inherit;
+  --mat-form-field-container-height: unset;
 }

 mat-toolbar {
@@ -285,10 +288,6 @@ mat-snack-bar-container {
  display: none;
 }

-#{$mat-form-field-infix} {
-  min-height: unset;
-}
-
 #{$mat-tab-labels} {
  border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
 }
@@ -349,3 +348,7 @@ adf-dynamic-component {
    background-color: var(--theme-blue-button-color);
  }
 }
+
+#{$mat-form-field-infix} {
+  min-height: unset;
+}
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ts
@@ -22,13 +22,13 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';

 // @deprecated Use `.aca-page-layout-content` CSS selector instead
@Component({
  standalone: true,
  selector: 'aca-page-layout-content',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'aca-page-layout-content' }
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ts
@@ -22,13 +22,13 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

 // @deprecated Use `.aca-page-layout-error` selectors instead
@Component({
  standalone: true,
  selector: 'aca-page-layout-error',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'aca-page-layout-error' }
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout-header.component.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout-header.component.ts
@@ -22,13 +22,13 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';

 // @deprecated Use `.aca-page-layout-header` CSS selector instead
@Component({
  standalone: true,
  selector: 'aca-page-layout-header',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'aca-page-layout-header' }
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
@@ -6,13 +6,13 @@
      title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
      <mat-icon>keyboard_double_arrow_right</mat-icon>
    </button>
-    <ng-content select=".aca-page-layout-header, aca-page-layout-header"></ng-content>
+    <ng-content select=".aca-page-layout-header, aca-page-layout-header" />
 </div>

 <ng-container *ngIf="hasError">
-  <ng-content select=".aca-page-layout-error, aca-page-layout-error"></ng-content>
+  <ng-content select=".aca-page-layout-error, aca-page-layout-error" />
 </ng-container>

 <ng-container *ngIf="!hasError">
-  <ng-content select=".aca-page-layout-content, aca-page-layout-content"></ng-content>
+  <ng-content select=".aca-page-layout-content, aca-page-layout-content" />
 </ng-container>
--- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss
+++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss
@@ -0,0 +1,7 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
+aca-toolbar-action {
+  #{$mat-mdc-button}#{$mat-button-base}#{$mat-outlined-button}#{$mat-unthemed} {
+    --mdc-outlined-button-label-text-color: var(--theme-secondary-text);
+  }
+}
--- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts
+++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts
@@ -34,6 +34,7 @@ import { ToolbarMenuComponent } from '../toolbar-menu/toolbar-menu.component';
  imports: [CommonModule, ToolbarButtonComponent, ToolbarMenuComponent, DynamicExtensionComponent],
  selector: 'aca-toolbar-action',
  templateUrl: './toolbar-action.component.html',
+  styleUrl: './toolbar-action.component.scss',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'aca-toolbar-action' }