feat(fields): adiciona limite na exibição de mensagens de erro

Adiciona as propriedades: - `p-error-limit` no `po-field-container-bottom` e nos componentes `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`, `po-decimal`, `po-email`, `po-input`, `po-login`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio group`, `po-rich-text`, `po-select`, `po-textarea`, `po-url` - `errorLimit` na interface para o componente `po-dynamic-form-field` utilizado para os componentes `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-datepicker-range`, `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, `po-lookup`, `po-textarea` - no componente `po-field-container-bottom`, a propriedade permite limitar a exibição da mensagem de erro a duas linhas e exibir um tooltip com o texto completo. Essa funcionalidade permite uma exibição mais compacta da mensagem de erro, com a opção de visualizar o conteúdo completo (via tooltip) ao passar o mouse sobre o erro. Fixes DTHFUI-10517
po-ui · Jan 8, 2025 · b77bbb9 · b77bbb9
1 parent 0b12f25
commit b77bbb9
Show file tree

Hide file tree

Showing 65 changed files with 331 additions and 27 deletions.
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts
@@ -279,6 +279,25 @@ export interface PoDynamicFormField extends PoDynamicField {
    */
   errorMessage?: string;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+   *
+   * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+   * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-datepicker-range`,
+   *  `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, `po-lookup`, `po-textarea`.
+   *
+   * @default `false`
+   */
+  errorLimit?: boolean;
+
+  errorAppendBox?: boolean;
+
   /**
    * Função executada para realizar a validação assíncrona personalizada.
    * Executada ao disparar o output `change` ou `change-model`, dependendo do valor da propriedade `triggerMode`.

diff --git a/...s/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html b/...s/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html
@@ -20,6 +20,7 @@
       [p-clean]="field.clean"
       [p-disabled]="isDisabled(field)"
       [p-error-pattern]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-error-async]="field.errorAsyncFunction"
       [p-auto-focus]="field.focus"
       [p-format]="field.format"
@@ -59,6 +60,7 @@
       [p-readonly]="field.readonly"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
     >
@@ -73,6 +75,7 @@
       [p-clean]="field.clean"
       [p-disabled]="isDisabled(field)"
       [p-error-pattern]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-error-async-properties]="field.errorAsyncProperties"
       [p-auto-focus]="field.focus"
       [p-help]="field.help"
@@ -104,6 +107,7 @@
       [p-clean]="field.clean"
       [p-disabled]="isDisabled(field)"
       [p-error-pattern]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-error-async-properties]="field.errorAsyncProperties"
       [p-auto-focus]="field.focus"
       [p-help]="field.help"
@@ -134,6 +138,7 @@
       [ngClass]="field.componentClass"
       [p-clean]="field.clean"
       [p-error-pattern]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-error-async-properties]="field.errorAsyncProperties"
       [p-disabled]="isDisabled(field)"
       [p-decimals-length]="field.decimalsLength"
@@ -174,6 +179,7 @@
       [p-options]="field.options"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -196,6 +202,7 @@
       [p-options]="field.options"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
     >
@@ -257,6 +264,7 @@
       [p-sort]="field.sort"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field, $event)"
       [p-icon]="field.icon"
@@ -297,6 +305,7 @@
       [p-optional]="field.optional"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -322,6 +331,7 @@
       [p-required]="field.required"
       [p-show-required]="field.showRequired"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       (p-change)="onChangeField(field)"
     >
     </po-checkbox-group>
@@ -342,6 +352,7 @@
       [p-options]="field.options"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -373,6 +384,7 @@
       [p-readonly]="field.readonly"
       [p-required]="field.required"
       [p-field-error-message]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-show-required]="field.showRequired"
       [p-rows]="field.rows"
       (p-change)="onChangeField(field)"
@@ -390,6 +402,7 @@
       [p-clean]="field.clean"
       [p-disabled]="isDisabled(field)"
       [p-error-pattern]="field.errorMessage"
+      [p-error-limit]="field.errorLimit"
       [p-error-async-properties]="field.errorAsyncProperties"
       [p-auto-focus]="field.focus"
       [p-help]="field.help"

diff --git a/...ects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.ts b/...ects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.ts
@@ -90,6 +90,20 @@ export class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Valid
    */
   @Input('p-field-error-message') fieldErrorMessage: string;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+   *
+   * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+   * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+   *
+   * @default `false`
+   */
+  @Input('p-error-limit') errorLimit: boolean = false;
+
   /**
    * @optional
    *

diff --git a/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.html b/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.html
@@ -27,5 +27,8 @@
     </ul>
   </div>
 
-  <po-field-container-bottom [p-error-pattern]="getErrorPattern()"></po-field-container-bottom>
+  <po-field-container-bottom
+    [p-error-pattern]="getErrorPattern()"
+    [p-error-limit]="errorLimit"
+  ></po-field-container-bottom>
 </po-field-container>
diff --git a/...-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.html b/...-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.html
@@ -10,6 +10,7 @@
   [p-options]="options"
   [p-required]="properties.includes('required')"
   [p-field-error-message]="fieldErrorMessage"
+  [p-error-limit]="properties?.includes('errorLimit')"
   [p-show-required]="properties.includes('showRequired')"
   (p-change)="changeEvent('p-change')"
 >

diff --git a/...ox-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.ts b/...ox-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.ts
@@ -31,7 +31,8 @@ export class SamplePoCheckboxGroupLabsComponent implements OnInit {
     { value: 'indeterminate', label: 'Indeterminate' },
     { value: 'optional', label: 'Optional' },
     { value: 'required', label: 'Required' },
-    { value: 'showRequired', label: 'Show Required' }
+    { value: 'showRequired', label: 'Show Required' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   ngOnInit() {

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
@@ -251,6 +251,22 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
    */
   @Input('p-field-error-message') fieldErrorMessage: string;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+   *
+   * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+   * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+   *
+   * @default `false`
+   */
+  @Input('p-error-limit') errorLimit: boolean = false;
+
+  @Input({ alias: 'p-error-append-in-body', transform: convertToBoolean }) errorAppendBox?: boolean = false;
+
   /**
    * @optional
    *

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html
@@ -88,6 +88,8 @@
       [p-help]="help"
       [p-disabled]="disabled"
       [p-error-pattern]="getErrorPattern()"
+      [p-error-limit]="errorLimit"
+      [p-append-in-body]="errorAppendBox"
     ></po-field-container-bottom>
   </po-field-container>
 

diff --git a/...onents/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.html b/...onents/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.html
@@ -25,6 +25,7 @@
   [p-show-required]="properties.includes('showRequired')"
   [p-sort]="properties.includes('sort')"
   (p-change)="changeEvent('p-change')"
+  [p-error-limit]="properties?.includes('errorLimit')"
 >
 </po-combo>
 

diff --git a/...mponents/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts b/...mponents/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts
@@ -61,7 +61,8 @@ export class SamplePoComboLabsComponent implements OnInit {
     { value: 'showRequired', label: 'Show Required' },
     { value: 'sort', label: 'Sort' },
     { value: 'clean', label: 'Clean' },
-    { value: 'disabledTabFilter', label: 'Disabled Tab Filter' }
+    { value: 'disabledTabFilter', label: 'Disabled Tab Filter' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   ngOnInit() {

diff --git a/.../ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range-base.component.ts b/.../ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range-base.component.ts
@@ -118,6 +118,20 @@ export abstract class PoDatepickerRangeBaseComponent implements ControlValueAcce
    */
   @Input('p-field-error-message') fieldErrorMessage: string;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+   *
+   * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+   * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+   *
+   * @default `false`
+   */
+  @Input('p-error-limit') errorLimit: boolean = false;
+
   /**
    * @optional
    *

diff --git a/...cts/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html b/...cts/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html
@@ -75,6 +75,7 @@
     [p-help]="help"
     [p-disabled]="disabled"
     [p-error-pattern]="getErrorMessage"
+    [p-error-limit]="errorLimit"
   ></po-field-container-bottom>
 </po-field-container>
 

diff --git a/...ge/samples/sample-po-datepicker-range-labs/sample-po-datepicker-range-labs.component.html b/...ge/samples/sample-po-datepicker-range-labs/sample-po-datepicker-range-labs.component.html
@@ -19,6 +19,7 @@
   [p-start-date]="startDate"
   [p-locale]="locale"
   (p-change)="changeEvent('p-change')"
+  [p-error-limit]="properties?.includes('errorLimit')"
 >
 </po-datepicker-range>
 

diff --git a/...ange/samples/sample-po-datepicker-range-labs/sample-po-datepicker-range-labs.component.ts b/...ange/samples/sample-po-datepicker-range-labs/sample-po-datepicker-range-labs.component.ts
@@ -34,7 +34,8 @@ export class SamplePoDatepickerRangeLabsComponent implements OnInit {
     { value: 'optional', label: 'Optional' },
     { value: 'readonly', label: 'Read Only' },
     { value: 'required', label: 'Required' },
-    { value: 'showRequired', label: 'Show Required' }
+    { value: 'showRequired', label: 'Show Required' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   public readonly localeOptions: Array<PoSelectOption> = [

diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker-base.component.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker-base.component.ts
@@ -148,6 +148,22 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
    */
   @Input('p-error-pattern') errorPattern?: string = '';
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+   *
+   * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+   * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+   *
+   * @default `false`
+   */
+  @Input('p-error-limit') errorLimit: boolean = false;
+
+  @Input({ alias: 'p-error-append-in-body', transform: convertToBoolean }) errorAppendBox?: boolean = false;
+
   /**
    * @optional
    *

diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.html b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.html
@@ -82,5 +82,7 @@
     [p-help]="help"
     [p-disabled]="disabled"
     [p-error-pattern]="getErrorPattern()"
+    [p-error-limit]="errorLimit"
+    [p-append-in-body]="errorAppendBox"
   ></po-field-container-bottom>
 </po-field-container>
diff --git a/.../po-datepicker/samples/sample-po-datepicker-labs/sample-po-datepicker-labs.component.html b/.../po-datepicker/samples/sample-po-datepicker-labs/sample-po-datepicker-labs.component.html
@@ -21,6 +21,7 @@
   [p-show-required]="properties.includes('showRequired')"
   (p-blur)="changeEvent('p-blur')"
   (p-change)="changeEvent('p-change')"
+  [p-error-limit]="properties?.includes('errorLimit')"
 >
 </po-datepicker>
 

diff --git a/...ld/po-datepicker/samples/sample-po-datepicker-labs/sample-po-datepicker-labs.component.ts b/...ld/po-datepicker/samples/sample-po-datepicker-labs/sample-po-datepicker-labs.component.ts
@@ -33,7 +33,8 @@ export class SamplePoDatepickerLabsComponent implements OnInit {
     { value: 'readonly', label: 'Read Only' },
     { value: 'required', label: 'Required' },
     { value: 'requiredFieldErrorMessage', label: 'Required Field Error Message' },
-    { value: 'showRequired', label: 'Show Required' }
+    { value: 'showRequired', label: 'Show Required' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   public readonly formatOptions: Array<PoRadioGroupOption> = [

diff --git a/projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.html b/projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.html
@@ -44,6 +44,12 @@
     </div>
   </div>
 
-  <po-field-container-bottom [p-help]="help" [p-disabled]="disabled" [p-error-pattern]="getErrorPatternMessage()">
+  <po-field-container-bottom
+    [p-help]="help"
+    [p-disabled]="disabled"
+    [p-error-limit]="errorLimit"
+    [p-error-pattern]="getErrorPatternMessage()"
+    [p-append-in-body]="errorAppendBox"
+  >
   </po-field-container-bottom>
 </po-field-container>
diff --git a/.../po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.html b/.../po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.html
@@ -23,6 +23,7 @@
   (p-blur)="changeEvent('p-blur')"
   (p-change)="changeEvent('p-change')"
   (p-change-model)="changeEvent('p-change-model')"
+  [p-error-limit]="properties?.includes('errorLimit')"
 >
 </po-decimal>
 

diff --git a/...ts/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts b/...ts/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts
@@ -42,7 +42,8 @@ export class SamplePoDecimalLabsComponent implements OnInit {
     { value: 'readonly', label: 'Read Only' },
     { value: 'required', label: 'Required' },
     { value: 'requiredFieldErrorMessage', label: 'Required Field Error Message' },
-    { value: 'showRequired', label: 'Show Required' }
+    { value: 'showRequired', label: 'Show Required' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   get maxDecimalsLength() {

diff --git a/...onents/po-field/po-email/samples/sample-po-email-labs/sample-po-email-labs.component.html b/...onents/po-field/po-email/samples/sample-po-email-labs/sample-po-email-labs.component.html
@@ -19,6 +19,7 @@
   (p-change)="changeEvent('p-change')"
   (p-change-model)="changeEvent('p-change-model')"
   (p-enter)="changeEvent('p-enter')"
+  [p-error-limit]="properties?.includes('errorLimit')"
 >
 </po-email>
 

diff --git a/...mponents/po-field/po-email/samples/sample-po-email-labs/sample-po-email-labs.component.ts b/...mponents/po-field/po-email/samples/sample-po-email-labs/sample-po-email-labs.component.ts
@@ -24,7 +24,8 @@ export class SamplePoEmailLabsComponent implements OnInit {
     { value: 'optional', label: 'Optional' },
     { value: 'readonly', label: 'Read Only' },
     { value: 'required', label: 'Required' },
-    { value: 'requiredFieldErrorMessage', label: 'Required Field Error Message' }
+    { value: 'requiredFieldErrorMessage', label: 'Required Field Error Message' },
+    { value: 'errorLimit', label: 'Limit Error Message' }
   ];
 
   ngOnInit() {