From bc98af0968ec42c663828d2647f2c3b49b7d56b3 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Thu, 12 Oct 2023 08:19:22 +0200
Subject: [PATCH] [ACS-6078] Fixed layout for create from template component
 (#3467)

* ACS-6078 Fixed layout for create from template component

* ACS-6078 Added selector

* ACS-6078 Custom class instead of mat class

* ACS-6078 Used component selector

* ACS-6078 Removed unused styles

* ACS-6078 Fixed e2e

* ACS-6078 Empty commit
---
 .../create-from-template.dialog.html          |  6 +++---
 .../create-from-template.dialog.scss          | 20 +++++++++----------
 .../create-from-template.dialog.ts            |  1 +
 .../create-from-template-dialog-component.ts  |  2 +-
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html
index f05cda4ad..e3f007132 100644
--- a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html
+++ b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html
@@ -1,7 +1,7 @@
 <h2 mat-dialog-title [innerHTML]="title"></h2>
 <div mat-dialog-content>
   <form [formGroup]="form" novalidate>
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <input
         cdkFocusInitial
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
@@ -15,7 +15,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <input
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
         matInput
@@ -27,7 +27,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <textarea
         matInput
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"
diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
index ba9f2bd23..f52968cf3 100644
--- a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
+++ b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
@@ -1,7 +1,8 @@
-.aca-create-from-template-dialog {
-  ng-component {
-    overflow: visible;
-  }
+app-create-from-template-dialog {
+  overflow: visible;
+  display: block;
+  margin-left: -24px;
+  margin-right: -24px;
 
   .mat-dialog-title {
     margin-left: 24px;
@@ -21,13 +22,12 @@
     }
   }
 
-  .mat-form-field {
-    margin-bottom: 20px;
-  }
+  .app-create-from-template-field {
+    width: 100%;
 
-  .mat-dialog-container {
-    padding-left: 0;
-    padding-right: 0;
+    &:not(:last-of-type) {
+      margin-bottom: 20px;
+    }
   }
 
   .mat-dialog-content {
diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts
index 7df6e8ee0..bbf1a8679 100644
--- a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts
+++ b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts
@@ -40,6 +40,7 @@ import { MatButtonModule } from '@angular/material/button';
   imports: [CommonModule, TranslateModule, MatDialogModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
   templateUrl: './create-from-template.dialog.html',
   styleUrls: ['./create-from-template.dialog.scss'],
+  selector: 'app-create-from-template-dialog',
   encapsulation: ViewEncapsulation.None
 })
 export class CreateFromTemplateDialogComponent implements OnInit {
diff --git a/projects/aca-playwright-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts b/projects/aca-playwright-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts
index f92df8049..9b40e6998 100644
--- a/projects/aca-playwright-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts
+++ b/projects/aca-playwright-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts
@@ -27,7 +27,7 @@ import { BaseComponent } from '../base.component';
 import { timeouts } from '../../../utils';
 
 export class CreateFromTemplateDialogComponent extends BaseComponent {
-  private static rootElement = 'ng-component';
+  private static rootElement = 'app-create-from-template-dialog';
 
   constructor(page: Page) {
     super(page, CreateFromTemplateDialogComponent.rootElement);