[ACS-7384] remove material module dependency and components conversion to standalone

lib/core/src/lib/layout/components/header/header.component.html

@@ -1,56 +1,41 @@
-<mat-toolbar
-    class="adf-toolbar-container-row"
-    [color]="color"
-    [style.background-color]="color"
-    [style.background-image]="backgroundImage ? 'url(' + backgroundImage + ')' : 'none'">
-    <button
-        *ngIf="showSidenavToggle && position === 'start'"
-        id="adf-sidebar-toggle-start"
-        data-automation-id="adf-menu-icon"
-        class="adf-menu-icon adf-header-icon-button"
-        mat-icon-button
-        (click)="toggleMenu()"
-        [attr.aria-expanded]="expandedSidenav"
-        [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
-        <mat-icon
-            class="adf-menu-icon-header"
-            role="img"
-            aria-hidden="true">{{ toggleIcon }}
-        </mat-icon>
+<mat-toolbar class="adf-toolbar-container-row"
+             [color]="color"
+             [style.background-color]="color"
+             [style.background-image]="backgroundImage ? 'url(' + backgroundImage + ')' : 'none'">
+    <button *ngIf="showSidenavToggle && position === 'start'"
+            id="adf-sidebar-toggle-start"
+            data-automation-id="adf-menu-icon"
+            class="adf-menu-icon adf-header-icon-button"
+            mat-icon-button
+            (click)="toggleMenu()"
+            [attr.aria-expanded]="expandedSidenav"
+            [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
+        <mat-icon class="adf-menu-icon-header" role="img" aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 
     <a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
-        <img
-            src="{{ logo }}"
-            class="adf-app-logo"
-            alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}"
-        />
+        <img src="{{ logo }}"
+             class="adf-app-logo"
+             alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
     </a>
 
-    <h1
-        role="link"
+    <h1 role="link"
         [attr.aria-label]="title | translate"
         [routerLink]="redirectUrl"
-        class="adf-app-title"
-        >
+        class="adf-app-title">
         {{ title }}
     </h1>
 
     <ng-content></ng-content>
 
-    <button
-        *ngIf="showSidenavToggle && position === 'end'"
-        id="adf-sidebar-toggle-end"
-        data-automation-id="adf-menu-icon"
-        class="adf-menu-icon adf-header-icon-button"
-        mat-icon-button
-        (click)="toggleMenu()"
-        [attr.aria-expanded]="expandedSidenav"
-        [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
-        <mat-icon
-            class="adf-menu-icon-header"
-            role="img"
-            aria-hidden="true">{{ toggleIcon }}
-        </mat-icon>
+    <button *ngIf="showSidenavToggle && position === 'end'"
+            id="adf-sidebar-toggle-end"
+            data-automation-id="adf-menu-icon"
+            class="adf-menu-icon adf-header-icon-button"
+            mat-icon-button
+            (click)="toggleMenu()"
+            [attr.aria-expanded]="expandedSidenav"
+            [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
+        <mat-icon class="adf-menu-icon-header" role="img" aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 </mat-toolbar>

lib/core/src/lib/layout/components/header/header.component.spec.ts

@@ -21,7 +21,6 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { By } from '@angular/platform-browser';
 import { SidenavLayoutModule } from '../../layout.module';
 import { Component } from '@angular/core';
-import { MaterialModule } from '../../../material.module';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatToolbarHarness } from '@angular/material/toolbar/testing';
@@ -262,7 +261,7 @@ describe('HeaderLayoutComponent', () => {
 
         beforeEach(() => {
             TestBed.configureTestingModule({
-                imports: [CoreTestingModule, SidenavLayoutModule, MaterialModule],
+                imports: [CoreTestingModule, SidenavLayoutModule],
                 declarations: [HeaderLayoutTesterComponent]
             });
         });

lib/core/src/lib/layout/components/header/header.component.ts

@@ -15,15 +15,23 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { AppConfigService } from '../../../app-config/app-config.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NgIf } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
 
 @Component({
     selector: 'adf-layout-header',
+    standalone: true,
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    imports: [MatToolbarModule, NgIf, MatButtonModule, TranslateModule, MatIconModule, RouterModule],
     host: { class: 'adf-layout-header' }
 })
 export class HeaderLayoutComponent implements OnInit {
@@ -69,10 +77,7 @@ export class HeaderLayoutComponent implements OnInit {
     /** The side of the page that the drawer is attached to (can be 'start' or 'end') */
     @Input() position = 'start';
 
-    constructor(
-        private appConfigService: AppConfigService
-    ) {
-    }
+    constructor(private appConfigService: AppConfigService) {}
 
     toggleMenu() {
         this.clicked.emit(true);

lib/core/src/lib/layout/components/layout-container/layout-container.component.html

@@ -1,11 +1,10 @@
 <mat-sidenav-container class="adf-layout-container">
-    <mat-sidenav
-        class="adf-layout-container-sidenav"
-        [position]="position"
-        [disableClose]="!isMobileScreenSize"
-        [@sidenavAnimation]="sidenavAnimationState"
-        [opened]="!isMobileScreenSize || !hideSidenav"
-        [mode]="isMobileScreenSize ? 'over' : 'side'">
+    <mat-sidenav class="adf-layout-container-sidenav"
+                 [position]="position"
+                 [disableClose]="!isMobileScreenSize"
+                 [@sidenavAnimation]="sidenavAnimationState"
+                 [opened]="!isMobileScreenSize || !hideSidenav"
+                 [mode]="isMobileScreenSize ? 'over' : 'side'">
         <ng-content sidenav select="[app-layout-navigation]"></ng-content>
     </mat-sidenav>
 

lib/core/src/lib/layout/components/layout-container/layout-container.component.ts

@@ -16,15 +16,17 @@
  */
 
 import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
-import { MatSidenav } from '@angular/material/sidenav';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
 import { Direction } from '@angular/cdk/bidi';
 
 @Component({
     selector: 'adf-layout-container',
+    standalone: true,
     templateUrl: './layout-container.component.html',
     styleUrls: ['./layout-container.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    imports: [MatSidenavModule],
     animations: [sidenavAnimation, contentAnimation]
 })
 export class LayoutContainerComponent implements OnInit, OnDestroy, OnChanges {

lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts

@@ -17,7 +17,6 @@
 
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MaterialModule } from '../../../material.module';
 import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -82,8 +81,8 @@ describe('Custom SidebarActionMenuComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [SidebarActionMenuComponent, CustomSidebarActionMenuComponent],
-            imports: [MaterialModule, NoopAnimationsModule]
+            declarations: [CustomSidebarActionMenuComponent],
+            imports: [SidebarActionMenuComponent, NoopAnimationsModule]
         });
         fixture = TestBed.createComponent(CustomSidebarActionMenuComponent);
         fixture.detectChanges();

lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts

@@ -16,18 +16,21 @@
  */
 
 import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 
 @Component({
     selector: 'adf-sidebar-action-menu',
+    standalone: true,
     templateUrl: './sidebar-action-menu.component.html',
     styleUrls: ['./sidebar-action-menu.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+    imports: [NgIf, MatButtonModule, MatMenuModule],
     host: { class: 'adf-sidebar-action-menu' }
 })
-
 export class SidebarActionMenuComponent {
-
     /** The title of the sidebar action. */
     @Input()
     title: string;
@@ -48,6 +51,20 @@ export class SidebarActionMenuComponent {
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({ selector: '[adf-sidebar-menu-options], [sidebar-menu-options]' }) export class SidebarMenuDirective {}
-@Directive({ selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective {}
-@Directive({ selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective {}
+@Directive({
+    selector: '[adf-sidebar-menu-options], [sidebar-menu-options]',
+    standalone: true
+})
+export class SidebarMenuDirective {}
+
+@Directive({
+    selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]',
+    standalone: true
+})
+export class SidebarMenuTitleIconDirective {}
+
+@Directive({
+    selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]',
+    standalone: true
+})
+export class SidebarMenuExpandIconDirective {}

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.spec.ts

@@ -21,14 +21,14 @@ import { SidenavLayoutComponent } from './sidenav-layout.component';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
 import { LayoutModule, MediaMatcher } from '@angular/cdk/layout';
 import { PlatformModule } from '@angular/cdk/platform';
-import { MaterialModule } from '../../../material.module';
 import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
 import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
 import { UserPreferencesService } from '../../../common/services/user-preferences.service';
-import { CommonModule } from '@angular/common';
 import { Direction } from '@angular/cdk/bidi';
 import { of } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({
     selector: 'adf-layout-container',
@@ -43,6 +43,7 @@ export class DummyLayoutContainerComponent {
     @Input() mediaQueryList: MediaQueryList;
     @Input() hideSidenav: boolean;
     @Input() expandedSidenav: boolean;
+
     toggleMenu() {}
 }
 
@@ -51,7 +52,7 @@ export class DummyLayoutContainerComponent {
     template: ` <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
         <adf-sidenav-layout-header>
             <ng-template let-toggleMenu="toggleMenu">
-                <div role="button" id="header-test" (click)="toggleMenu()" role="button" tabindex="0" (keyup.enter)="toggleMenu()"></div>
+                <div id="header-test" (click)="toggleMenu()" role="button" tabindex="0" (keyup.enter)="toggleMenu()"></div>
             </ng-template>
         </adf-sidenav-layout-header>
 
@@ -78,14 +79,16 @@ describe('SidenavLayoutComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CommonModule, PlatformModule, LayoutModule, MaterialModule],
-            declarations: [
-                DummyLayoutContainerComponent,
+            imports: [
+                CommonModule,
+                NoopAnimationsModule,
+                PlatformModule,
+                LayoutModule,
                 SidenavLayoutComponent,
-                SidenavLayoutContentDirective,
                 SidenavLayoutHeaderDirective,
                 SidenavLayoutNavigationDirective
             ],
+            declarations: [SidenavLayoutTesterComponent, DummyLayoutContainerComponent],
             providers: [MediaMatcher, { provide: UserPreferencesService, useValue: { select: () => of() } }],
             schemas: [CUSTOM_ELEMENTS_SCHEMA]
         });
@@ -221,15 +224,15 @@ describe('Template transclusion', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CommonModule, PlatformModule, LayoutModule, MaterialModule],
-            declarations: [
-                DummyLayoutContainerComponent,
-                SidenavLayoutTesterComponent,
-                SidenavLayoutComponent,
+            imports: [
+                CommonModule,
+                PlatformModule,
+                LayoutModule,
                 SidenavLayoutContentDirective,
                 SidenavLayoutHeaderDirective,
                 SidenavLayoutNavigationDirective
             ],
+            declarations: [DummyLayoutContainerComponent, SidenavLayoutTesterComponent],
             providers: [MediaMatcher, { provide: UserPreferencesService, useValue: { select: () => of() } }]
         });
         mediaMatcher = TestBed.inject(MediaMatcher);

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts

@@ -141,8 +141,7 @@ const template: Story<SidenavLayoutModule> = (args: SidenavLayoutComponent) => (
         [stepOver]="stepOver"
         [position]="position"
         [hideSidenav]="hideSidenav"
-        [expandedSidenav]="expandedSidenav"
-        >
+        [expandedSidenav]="expandedSidenav">
         <div class="adf-sidenav-layout-full-space">
             <adf-sidenav-layout-header>
                 <ng-template>

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -36,12 +36,16 @@ import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layou
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { Direction } from '@angular/cdk/bidi';
 import { takeUntil } from 'rxjs/operators';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { LayoutContainerComponent } from '../layout-container/layout-container.component';
 
 @Component({
     selector: 'adf-sidenav-layout',
+    standalone: true,
     templateUrl: './sidenav-layout.component.html',
     styleUrls: ['./sidenav-layout.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    imports: [NgIf, NgTemplateOutlet, LayoutContainerComponent],
     host: { class: 'adf-sidenav-layout' }
 })
 export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -96,7 +100,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private mediaMatcher: MediaMatcher, private userPreferencesService: UserPreferencesService ) {
+    constructor(private mediaMatcher: MediaMatcher, private userPreferencesService: UserPreferencesService) {
         this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     }
 

lib/core/src/lib/layout/directives/sidenav-layout-content.directive.ts

@@ -18,7 +18,8 @@
 import { ContentChild, Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-    selector: 'adf-sidenav-layout-content'
+    selector: 'adf-sidenav-layout-content',
+    standalone: true
 })
 export class SidenavLayoutContentDirective {
     @ContentChild(TemplateRef)

lib/core/src/lib/layout/directives/sidenav-layout-header.directive.ts

@@ -18,7 +18,8 @@
 import { ContentChild, Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-    selector: 'adf-sidenav-layout-header'
+    selector: 'adf-sidenav-layout-header',
+    standalone: true
 })
 export class SidenavLayoutHeaderDirective {
     @ContentChild(TemplateRef)

lib/core/src/lib/layout/directives/sidenav-layout-navigation.directive.ts

@@ -18,7 +18,8 @@
 import { ContentChild, Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-    selector: 'adf-sidenav-layout-navigation'
+    selector: 'adf-sidenav-layout-navigation',
+    standalone: true
 })
 export class SidenavLayoutNavigationDirective {
     @ContentChild(TemplateRef)

lib/core/src/lib/layout/layout.module.ts

@@ -15,27 +15,22 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MaterialModule } from '../material.module';
 import { SidenavLayoutContentDirective } from './directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from './directives/sidenav-layout-header.directive';
 import { SidenavLayoutNavigationDirective } from './directives/sidenav-layout-navigation.directive';
 import { SidenavLayoutComponent } from './components/sidenav-layout/sidenav-layout.component';
 import { LayoutContainerComponent } from './components/layout-container/layout-container.component';
-import { SidebarActionMenuComponent, SidebarMenuDirective,
-    SidebarMenuExpandIconDirective, SidebarMenuTitleIconDirective } from './components/sidebar-action/sidebar-action-menu.component';
+import {
+    SidebarActionMenuComponent,
+    SidebarMenuDirective,
+    SidebarMenuExpandIconDirective,
+    SidebarMenuTitleIconDirective
+} from './components/sidebar-action/sidebar-action-menu.component';
 import { HeaderLayoutComponent } from './components/header/header.component';
-import { TranslateModule } from '@ngx-translate/core';
+
 @NgModule({
     imports: [
-        CommonModule,
-        MaterialModule,
-        RouterModule,
-        TranslateModule
-    ],
-    exports: [
         SidenavLayoutHeaderDirective,
         SidenavLayoutContentDirective,
         SidenavLayoutNavigationDirective,
@@ -47,7 +42,7 @@ import { TranslateModule } from '@ngx-translate/core';
         SidebarMenuTitleIconDirective,
         HeaderLayoutComponent
     ],
-    declarations: [
+    exports: [
         SidenavLayoutHeaderDirective,
         SidenavLayoutContentDirective,
         SidenavLayoutNavigationDirective,