[AAE-6345] New start process page APA (#7521)

* [AAE-6345] New start process page APA

* [AAE-6345] Added test

* [AAE-6345] Update

* CR

* Revrite wrapper to component

* Quick fix to e2e

* Show errors as ng-content

* Add Inplace word

* Fix unit tests

* Fix e2e

lib/core/form/components/inplace-form-input/inplace-form-input.component.html

@@ -0,0 +1,17 @@
+<div
+    class="adf-inplace-input-container"
+    [ngClass]="{'adf-inplace-input-container-error': control.invalid}"
+>
+    <mat-form-field class="adf-inplace-input-mat-form-field">
+        <input
+            matInput
+            [formControl]="control"
+            class="adf-inplace-input"
+            data-automation-id="adf-inplace-input"
+        >
+
+        <mat-error data-automation-id="adf-inplace-input-error">
+            <ng-content></ng-content>
+        </mat-error>
+    </mat-form-field>
+</div>

lib/core/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -0,0 +1,35 @@
+.adf-inplace-input-container {
+    .mat-form-field-underline {
+        display: none;
+    }
+
+    .mat-form-field-infix {
+        display: flex;
+        border-top: 0;
+    }
+
+    &-error {
+        input {
+            border: 1px solid var(--theme-warn-color) !important;
+        }
+    }
+
+    .adf-inplace-input-mat-form-field {
+        width: 100%;
+    }
+
+    .adf-inplace-input {
+        padding: 7px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+
+        &:focus {
+            border: 1px solid var(--theme-primary-color);
+        }
+
+        &:hover:not(:focus) {
+            border: 1px solid var(--theme-bg-hover-color);
+            background-color: var(--theme-bg-hover-color);
+        }
+    }
+}

lib/core/form/components/inplace-form-input/inplace-form-input.component.spec.ts

@@ -0,0 +1,72 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContentTestingModule } from 'content-services/src/lib/testing/content.testing.module';
+import { InplaceFormInputComponent } from './inplace-form-input.component';
+
+describe('InplaceFormInputComponent', () => {
+    let component: InplaceFormInputComponent;
+    let fixture: ComponentFixture<InplaceFormInputComponent>;
+    let formControl: FormControl;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                TranslateModule.forRoot(),
+                ContentTestingModule
+            ],
+            declarations: [InplaceFormInputComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        formControl = new FormControl('');
+        fixture = TestBed.createComponent(InplaceFormInputComponent);
+
+        component = fixture.componentInstance;
+        component.control = formControl;
+    });
+
+    it('should update form value', () => {
+        formControl.setValue('New Value');
+        fixture.detectChanges();
+
+        const input = fixture.nativeElement.querySelector(
+            '[data-automation-id="adf-inplace-input"]'
+        );
+
+        expect(input.value).toBe('New Value');
+    });
+
+    it('should show error', () => {
+        formControl.setValidators(() => ({ error: 'error' }));
+        formControl.setValue('value');
+        formControl.markAsTouched();
+        formControl.updateValueAndValidity();
+
+        fixture.detectChanges();
+
+        const error = fixture.nativeElement.querySelector(
+            '[data-automation-id="adf-inplace-input-error"]'
+        );
+
+        expect(error).toBeTruthy();
+    });
+});

lib/core/form/components/inplace-form-input/inplace-form-input.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    Component,
+    Input,
+    ViewEncapsulation
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+    selector: 'adf-inplace-form-input',
+    templateUrl: './inplace-form-input.component.html',
+    styleUrls: ['./inplace-form-input.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class InplaceFormInputComponent {
+    @Input()
+    control: FormControl;
+}

lib/core/form/form-base.module.ts

@@ -40,6 +40,7 @@ import { EditJsonDialogModule } from '../dialogs/edit-json/edit-json.dialog.modu
 import { A11yModule } from '@angular/cdk/a11y';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ViewerModule } from '../viewer/viewer.module';
+import { InplaceFormInputComponent } from './components/inplace-form-input/inplace-form-input.component';
 
 @NgModule({
     imports: [
@@ -67,7 +68,8 @@ import { ViewerModule } from '../viewer/viewer.module';
         StartFormCustomButtonDirective,
         ...WIDGET_DIRECTIVES,
         ...MASK_DIRECTIVE,
-        WidgetComponent
+        WidgetComponent,
+        InplaceFormInputComponent
     ],
     exports: [
         ContentWidgetComponent,
@@ -75,6 +77,7 @@ import { ViewerModule } from '../viewer/viewer.module';
         FormListComponent,
         FormRendererComponent,
         StartFormCustomButtonDirective,
+        InplaceFormInputComponent,
         ...WIDGET_DIRECTIVES
     ]
 })

lib/core/form/public-api.ts

@@ -18,6 +18,7 @@
 export * from './components/form-field/form-field.component';
 export * from './components/form-base.component';
 export * from './components/form-list.component';
+export * from './components/inplace-form-input/inplace-form-input.component';
 export * from './components/widgets/content/content.widget';
 export * from './components/form-custom-button.directive';
 export * from './components/form-renderer.component';