AAE-36582 Update errors containers in widgets

This commit is contained in:
Tomasz Nastaly
2025-07-31 15:41:40 +02:00
parent 27b6d020f9
commit 506b2340a4
4 changed files with 39 additions and 29 deletions
@@ -264,6 +264,18 @@
line-height: 64px; line-height: 64px;
margin-right: 15px; margin-right: 15px;
} }
&-error-messages-container {
min-height: 35px;
}
&-error-messages-container-visible {
visibility: visible;
}
&-error-messages-container-hidden {
visibility: hidden;
}
} }
form-field { form-field {
@@ -275,7 +287,3 @@ form-field {
line-height: normal; line-height: normal;
} }
} }
.adf-error-messages-container {
min-height: 35px;
}
@@ -13,29 +13,30 @@
<div> <div>
<mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null"> <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
@if( (field.name || field?.required) && !field.leftLabels) { @if( (field.name || field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id"> <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
{{ field.name | translate }}
</mat-label>
} }
<input matInput <input
matInput
class="adf-input" class="adf-input"
type="text" type="text"
data-automation-id="adf-display-external-property-widget" data-automation-id="adf-display-external-property-widget"
[id]="field.id" [id]="field.id"
[formControl]="propertyControl" [formControl]="propertyControl"
[required]="field.required" [required]="field.required"
> />
<ng-container *ngIf="previewState"> <ng-container *ngIf="previewState">
<span class="adf-display-external-property-widget-preview" <span class="adf-display-external-property-widget-preview" data-automation-id="adf-display-external-property-widget-preview">
data-automation-id="adf-display-external-property-widget-preview"
>
{{ field.params.externalPropertyLabel }} {{ field.params.externalPropertyLabel }}
</span> </span>
</ng-container> </ng-container>
</mat-form-field> </mat-form-field>
<ng-container *ngIf="!previewState"> <div
class="adf-error-messages-container"
[ngClass]="!previewState ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
>
<error-widget *ngIf="propertyLoadFailed" [required]="'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate" /> <error-widget *ngIf="propertyLoadFailed" [required]="'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate" />
</ng-container> </div>
</div>
</div> </div>
@@ -11,7 +11,8 @@
</div> </div>
<div> <div>
<mat-form-field class="adf-form-field-input"> <mat-form-field class="adf-form-field-input">
@if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> } @if ( (field.name || this.field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
<mat-select <mat-select
class="adf-select" class="adf-select"
[formControl]="dropdownControl" [formControl]="dropdownControl"
@@ -29,12 +30,11 @@
<mat-option id="readonlyOption" *ngIf="isReadOnlyType" [value]="field.value">{{field.value}}</mat-option> <mat-option id="readonlyOption" *ngIf="isReadOnlyType" [value]="field.value">{{field.value}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="adf-error-messages-container" *ngIf="!previewState && !field.readOnly"> <div
<error-widget class="adf-error-messages-container"
class="adf-dropdown-required-message" [ngClass]="!previewState && !field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
*ngIf="showRequiredMessage" >
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" <error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
/>
<error-widget <error-widget
class="adf-dropdown-failed-message" class="adf-dropdown-failed-message"
*ngIf="isRestApiFailed" *ngIf="isRestApiFailed"
@@ -29,7 +29,7 @@ import {
SelectFilterInputComponent, SelectFilterInputComponent,
WidgetComponent WidgetComponent
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { AsyncPipe, NgFor, NgIf } from '@angular/common'; import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@@ -59,6 +59,7 @@ export const HIDE_FILTER_LIMIT = 5;
imports: [ imports: [
NgIf, NgIf,
NgFor, NgFor,
NgClass,
AsyncPipe, AsyncPipe,
ReactiveFormsModule, ReactiveFormsModule,
MatFormFieldModule, MatFormFieldModule,