[ACS-7385][ADF] Break Login dependency on Material Module (#9501)

lib/core/src/lib/login/components/login-dialog-panel.component.html → lib/core/src/lib/login/components/login-dialog-panel/login-dialog-panel.component.html

@@ -5,7 +5,11 @@
                [showLoginActions]="false"
                [backgroundImageUrl]="''"
                (success)="onLoginSuccess($event)">
-        <adf-login-header><ng-template></ng-template></adf-login-header>
-        <adf-login-footer><ng-template></ng-template></adf-login-footer>
+        <adf-login-header>
+            <ng-template></ng-template>
+        </adf-login-header>
+        <adf-login-footer>
+            <ng-template></ng-template>
+        </adf-login-footer>
     </adf-login>
 </div>

lib/core/src/lib/login/components/login-dialog-panel.component.spec.ts → lib/core/src/lib/login/components/login-dialog-panel/login-dialog-panel.component.spec.ts

@@ -15,13 +15,11 @@
  * limitations under the License.
  */
 
+import { BasicAlfrescoAuthService, CoreTestingModule, LoginDialogPanelComponent } from '@alfresco/adf-core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LoginDialogPanelComponent } from './login-dialog-panel.component';
-import { of } from 'rxjs';
-import { CoreTestingModule } from '../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
-import { BasicAlfrescoAuthService } from '../../auth/basic-auth/basic-alfresco-auth.service';
-import { OidcAuthenticationService } from '../../auth/services/oidc-authentication.service';
+import { of } from 'rxjs';
+import { OidcAuthenticationService } from '../../../auth/services/oidc-authentication.service';
 
 describe('LoginDialogPanelComponent', () => {
     let component: LoginDialogPanelComponent;
@@ -38,7 +36,7 @@ describe('LoginDialogPanelComponent', () => {
                 CoreTestingModule
             ],
             providers: [
-                { provide: OidcAuthenticationService, useValue: {}}
+                { provide: OidcAuthenticationService, useValue: {} }
             ]
         });
         fixture = TestBed.createComponent(LoginDialogPanelComponent);

lib/core/src/lib/login/components/login-dialog-panel.component.ts → lib/core/src/lib/login/components/login-dialog-panel/login-dialog-panel.component.ts

@@ -15,14 +15,22 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ViewChild, Output, EventEmitter } from '@angular/core';
-import { LoginComponent } from './login.component';
-import { LoginSuccessEvent } from '../models/login-success.event';
+import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { LoginFooterDirective } from '../../directives/login-footer.directive';
+import { LoginHeaderDirective } from '../../directives/login-header.directive';
+import { LoginSuccessEvent } from '../../models/login-success.event';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
     selector: 'adf-login-dialog-panel',
+    standalone: true,
     templateUrl: './login-dialog-panel.component.html',
     styleUrls: ['./login-dialog-panel.component.scss'],
+    imports: [
+        LoginComponent,
+        LoginHeaderDirective,
+        LoginFooterDirective
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class LoginDialogPanelComponent {

lib/core/src/lib/login/components/login-dialog/login-dialog.component.html

@@ -0,0 +1,24 @@
+<header mat-dialog-title
+        data-automation-id="login-dialog-title">
+    {{ data?.title }}
+</header>
+
+<mat-dialog-content class="adf-login-dialog-content">
+    <adf-login-dialog-panel #adfLoginPanel (success)="onLoginSuccess($event)">
+    </adf-login-dialog-panel>
+</mat-dialog-content>
+
+<mat-dialog-actions class="adf-login-dialog-content-actions" align="end">
+    <button mat-button (click)="close()"
+            data-automation-id="login-dialog-actions-cancel">
+        {{ 'LOGIN.DIALOG.CANCEL' | translate }}
+    </button>
+
+    <button mat-button
+            class="choose-action"
+            data-automation-id="login-dialog-actions-perform"
+            [disabled]="!isFormValid()"
+            (click)="submitForm()">
+        {{ buttonActionName | translate }}
+    </button>
+</mat-dialog-actions>

lib/core/src/lib/login/components/login-dialog.component.stories.ts → lib/core/src/lib/login/components/login-dialog/login-dialog.component.stories.ts

@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { CoreStoryModule } from '../../testing/core.story.module';
+import { MatButtonModule } from '@angular/material/button';
 import { RouterTestingModule } from '@angular/router/testing';
-import { LoginModule } from './../login.module';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { AuthenticationService } from '../../../auth';
+import { AuthenticationMock } from '../../../auth/mock/authentication.service.mock';
+import { CoreStoryModule } from '../../../testing/core.story.module';
+import { LoginModule } from '../../login.module';
 import { LoginDialogStorybookComponent } from './login-dialog.stories.component';
-import { MatButtonModule } from '@angular/material/button';
-import { AuthenticationService } from '../../auth/services/authentication.service';
-import { AuthenticationMock } from '../../auth/mock/authentication.service.mock';
 
 export default {
     component: LoginDialogStorybookComponent,

lib/core/src/lib/login/components/login-dialog.component.ts → lib/core/src/lib/login/components/login-dialog/login-dialog.component.ts

@@ -15,14 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, Inject, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { LoginDialogPanelComponent } from '../login-dialog-panel/login-dialog-panel.component';
 import { LoginDialogComponentData } from './login-dialog-component-data.interface';
-import { LoginDialogPanelComponent } from './login-dialog-panel.component';
+
 @Component({
     selector: 'adf-login-dialog',
+    standalone: true,
     templateUrl: './login-dialog.component.html',
     styleUrls: ['./login-dialog.component.scss'],
+    imports: [
+        MatDialogModule,
+        LoginDialogPanelComponent,
+        TranslateModule,
+        MatButtonModule
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class LoginDialogComponent {

lib/core/src/lib/login/components/login-dialog.stories.component.ts → lib/core/src/lib/login/components/login-dialog/login-dialog.stories.component.ts

@@ -16,16 +16,22 @@
  */
 
 import { Component, Output, EventEmitter } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { LoginDialogComponent } from './login-dialog.component';
 import { LoginDialogComponentData } from './login-dialog-component-data.interface';
 
 @Component({
     selector: 'adf-login-dialog-storybook',
-    template: `<button mat-raised-button (click)="openLoginDialog()">
-        Open dialog
-    </button>`
+    standalone: true,
+    imports: [
+        MatButtonModule
+    ],
+    template: `
+        <button mat-raised-button (click)="openLoginDialog()">
+            Open dialog
+        </button>`
 })
 export class LoginDialogStorybookComponent {