[AAE-6807] Simulate real form

2025-09-17 14:21:29 +00:00 · 2022-05-09 15:45:07 +02:00
parent 7472f4ef7d
commit b55a54b84e
8 changed files with 5440 additions and 458 deletions
--- a/lib/core/form/components/form-renderer.component.scss
+++ b/lib/core/form/components/form-renderer.component.scss
@@ -97,13 +97,25 @@
    &-compact-field {
        font-size: 12px;
        .mat-form-field-wrapper {
-            padding-bottom: 0;
+            padding-bottom: 6px;
        }
        &.mat-form-field-invalid {
            .mat-form-field-wrapper {
                padding-bottom: 18px;
            }
        }
+        .mat-form-field-label {
+            top: 0;
+            margin-top: 0;
+        }
+    }
+
+    &-compact-dropdown {
+        font-size: 12px;
+
+        .mat-form-field-wrapper > div {
+            background-color: var(--theme-card-bg-color);
+        }
    }

    &-form-mat-card-actions {
--- a/lib/core/form/components/widgets/number/number.widget.html
+++ b/lib/core/form/components/widgets/number/number.widget.html
@@ -4,9 +4,7 @@
        <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}
            <span class="adf-asterisk" *ngIf="isRequired()">*</span>
        </mat-label>
-        <label *ngIf="!field.compactFields" class="adf-label" [attr.for]="field.id">{{field.name | translate }}
-            <span class="adf-asterisk" *ngIf="isRequired()">*</span>
-        </label>
+        <label class="adf-label"  *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
        <input matInput
            class="adf-input"
            type="text"
@@ -23,6 +21,6 @@
            matTooltipPosition="above"
            matTooltipShowDelay="1000">
      </mat-form-field>
-      <error-widget [error]="field.validationSummary"></error-widget>
-      <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+      <error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget>
+      <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget>
 </div>
--- a/lib/core/form/components/widgets/number/number.widget.scss
+++ b/lib/core/form/components/widgets/number/number.widget.scss
@@ -1,15 +1,10 @@
 .adf {
-    // &-number-widget {
+    &-number-widget {

-    //     display: flex;
+        width: 100%;

-    //     div {
-    //         width: 100%;
-    //         padding-right: 1%;
-    //     }
-
-    //     .mat-form-field-label-wrapper {
-    //         top: 20px;
-    //     }
-    // }
+        .mat-form-field-label-wrapper label {
+            top: 20px;
+        }
+    }
 }
--- a/lib/core/form/components/widgets/text/text.widget.html
+++ b/lib/core/form/components/widgets/text/text.widget.html
@@ -1,26 +1,26 @@
 <div class="adf-textfield adf-text-widget {{field.className}}"
     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
-    <label class="adf-left-label" *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-    <div>
-        <mat-form-field [hideRequiredMarker]="true">
-            <label class="adf-label"  *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-            <input matInput
-                   class="adf-input"
-                   type="text"
-                   [id]="field.id"
-                   [required]="isRequired()"
-                   [value]="field.value"
-                   [(ngModel)]="field.value"
-                   (ngModelChange)="onFieldChanged(field)"
-                   [disabled]="field.readOnly || readOnly"
-                   [textMask]="{mask: mask, isReversed: isMaskReversed}"
-                   [placeholder]="placeholder"
-                   [matTooltip]="field.tooltip"
-                   (blur)="markAsTouched()"
-                    matTooltipPosition="above"
-                    matTooltipShowDelay="1000">
-        </mat-form-field>
-        <error-widget [error]="field.validationSummary"></error-widget>
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-    </div>
+    <mat-form-field [hideRequiredMarker]="true" [appearance]="field.compactFields ? 'outline' : 'legacy'" [class.adf-compact-field]="field.compactFields">
+    <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}
+        <span class="adf-asterisk" *ngIf="isRequired()">*</span>
+    </mat-label>
+    <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    <input matInput
+        class="adf-input"
+        type="text"
+        [id]="field.id"
+        [required]="isRequired()"
+        [value]="field.value"
+        [(ngModel)]="field.value"
+        (ngModelChange)="onFieldChanged(field)"
+        [disabled]="field.readOnly || readOnly"
+        [textMask]="{mask: mask, isReversed: isMaskReversed}"
+        [placeholder]="placeholder"
+        [matTooltip]="field.tooltip"
+        (blur)="markAsTouched()"
+        matTooltipPosition="above"
+        matTooltipShowDelay="1000">
+    </mat-form-field>
+    <error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget>
+    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget>
 </div>
--- a/lib/core/form/components/widgets/text/text.widget.scss
+++ b/lib/core/form/components/widgets/text/text.widget.scss
@@ -1,14 +1,9 @@
 .adf {
    &-text-widget {

-        display: flex;
+        width: 100%;

-        div {
-            width: 100%;
-            padding-right: 1%;
-        }
-
-        .mat-form-field-label-wrapper {
+        .mat-form-field-label-wrapper label {
            top: 20px;
        }
    }
--- a/lib/core/mock/form/demo-form.mock.ts
+++ b/lib/core/mock/form/demo-form.mock.ts
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
@@ -1,11 +1,12 @@
 <div class="adf-dropdown-widget {{field.className}}"
     [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
-    <div class="adf-dropdown-widget-top-labels">
+    <div class="adf-dropdown-widget-top-labels" *ngIf="!field.compactFields">
        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
            *ngIf="isRequired()">*</span>
        </label>
    </div>
-    <mat-form-field>
+    <mat-form-field [appearance]="field.compactFields ? 'fill' : 'legacy'" [class.adf-compact-dropdown]="field.compactFields">
+        <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}</mat-label>
        <mat-select class="adf-select"
                    [id]="field.id"
                    [(ngModel)]="field.value"
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
@@ -39,6 +39,12 @@ export const HIDE_FILTER_LIMIT = 5;

 /* eslint-disable @angular-eslint/component-selector */

+interface Food {
+    value: string;
+    viewValue: string;
+  }
+
+  
@Component({
    selector: 'dropdown-cloud-widget',
    templateUrl: './dropdown-cloud.widget.html',
@@ -64,6 +70,12 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
    list$: Observable<FormFieldOption[]>;
    filter$ = new BehaviorSubject<string>('');

+    foods: Food[] = [
+        {value: 'steak-0', viewValue: 'Steak'},
+        {value: 'pizza-1', viewValue: 'Pizza'},
+        {value: 'tacos-2', viewValue: 'Tacos'},
+      ];
+
    protected onDestroy$ = new Subject<boolean>();

    constructor(public formService: FormService,