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 index e6aad6804..e0e23dd07 100644 --- 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 @@ -36,29 +36,14 @@ - + diff --git a/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.ts b/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.ts index d57a71912..0bfdb2421 100644 --- a/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.ts +++ b/projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.ts @@ -199,10 +199,6 @@ export class PoCheckboxGroupComponent return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - trackByFn(index) { return index; } diff --git a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.spec.ts b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.spec.ts index 54ac55d5e..ccfccf341 100644 --- a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.spec.ts @@ -512,28 +512,6 @@ describe('PoCheckboxComponent:', () => { expect(component.showAdditionalHelp).not.toHaveBeenCalled(); }); }); - describe('showAdditionalHelpIcon:', () => { - it('should return true when additionalHelpTooltip is truthy', () => { - (component as any).additionalHelpTooltip = 'additionalHelpTooltip'; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(false); - - expect(component.showAdditionalHelpIcon()).toBeTrue(); - }); - - it('should return true when additionalHelpTooltip is falsy but event is triggered', () => { - (component as any).additionalHelpTooltip = null; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(true); - - expect(component.showAdditionalHelpIcon()).toBeTrue(); - }); - - it('should return false when additionalHelpTooltip is falsy and event not triggered', () => { - (component as any).additionalHelpTooltip = null; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(false); - - expect(component.showAdditionalHelpIcon()).toBeFalse(); - }); - }); }); describe('Templates:', () => { diff --git a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts index 7306e0e4d..9f6ad4694 100644 --- a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts +++ b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts @@ -203,10 +203,6 @@ export class PoCheckboxComponent extends PoCheckboxBaseComponent implements Afte return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - setHelper(label?: string, additionalHelpTooltip?: string) { return setHelperSettings( label, 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 index 461b3e0cf..46a4dacfd 100644 --- 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 @@ -118,17 +118,12 @@ } diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts index 173990268..b94f288e6 100644 --- a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts +++ b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts @@ -668,10 +668,6 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI } } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - showMoreInfiniteScroll(): void { if (this.defaultService.hasNext) { this.infiniteLoading = true; diff --git a/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html b/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html index f0151a7f3..a0aa182f2 100644 --- a/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html +++ b/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html @@ -93,17 +93,12 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts b/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts index d155c7f11..327056cee 100644 --- a/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts +++ b/projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts @@ -319,10 +319,6 @@ export class PoDatepickerRangeComponent this.isDateRangeInputFormatValid = true; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - /** * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`. * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`. 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 index 0bcb3ec3c..1e8872002 100644 --- 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 @@ -108,17 +108,12 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts index 52bd782fb..172ba2342 100644 --- a/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts +++ b/projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts @@ -495,10 +495,6 @@ export class PoDatepickerComponent extends PoDatepickerBaseComponent implements return element.classList.contains('po-datepicker-calendar-overlay'); } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - verifyErrorAsync(value) { if (this.errorPattern !== '' && this.errorAsync) { const errorAsync = this.errorAsync(value); 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 index 1229563b0..42bde4b87 100644 --- 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 @@ -74,17 +74,12 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html index 522a7f0ec..3ad528408 100644 --- a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html +++ b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html @@ -1,5 +1,5 @@
} - @if (!errorPattern && (help || showAdditionalHelpIcon)) { + @if (!errorPattern && help) {
@if (help) { {{ help }} } - @if (showAdditionalHelpIcon && !hideAdditionalHelpByLabel()) { -
- -
- }
} + @if (poHelperComponent()) { + + + } diff --git a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.spec.ts b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.spec.ts index 2d1c0cd9f..f307a7f6c 100644 --- a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.spec.ts @@ -34,37 +34,75 @@ describe('PoFieldContainerBottomComponent', () => { beforeEach(() => { changes = { - showAdditionalHelp: new SimpleChange(false, true, true) + showHelperComponent: new SimpleChange(false, true, false) }; - component.poTooltip = { toggleTooltipVisibility: jasmine.createSpy() } as any; - spyOn(component.additionalHelp, 'emit'); + (component as any).helperEl = { + openHelperPopover: jasmine.createSpy('openHelperPopover'), + closeHelperPopover: jasmine.createSpy('closeHelperPopover') + } as any; + + spyOn(component as any, 'poHelperComponent').and.returnValue({}); + spyOn(component as any, 'showHelperComponent').and.returnValue(false); }); describe('ngOnChanges', () => { - it('should emit `p-additional-help` event if `p-additional-help-tooltip` is not defined', () => { - (component as any).isInitialChange = false; - component.additionalHelpTooltip = null; + it('should call `eventOnClick` when `showHelperComponent()` is true and `eventOnClick` is a function', () => { + const eventOnClickSpy = jasmine.createSpy('eventOnClick'); + (component as any).poHelperComponent.and.returnValue({ eventOnClick: eventOnClickSpy }); + (component as any).showHelperComponent.and.returnValue(true); + component.ngOnChanges(changes); + + expect(eventOnClickSpy).toHaveBeenCalled(); + expect((component as any).helperEl.openHelperPopover).not.toHaveBeenCalled(); + expect((component as any).helperEl.closeHelperPopover).not.toHaveBeenCalled(); + }); + + it('should open the popover when `showHelperComponent()` is true and `eventOnClick` is not a function', () => { + (component as any).poHelperComponent.and.returnValue({ eventOnClick: undefined }); + (component as any).showHelperComponent.and.returnValue(true); + component.ngOnChanges(changes); + + expect((component as any).helperEl.openHelperPopover).toHaveBeenCalled(); + expect((component as any).helperEl.closeHelperPopover).not.toHaveBeenCalled(); + }); + + it('should open the popover when `showHelperComponent()` is true and `poHelperComponent()` returns null/undefined', () => { + (component as any).poHelperComponent.and.returnValue(undefined); + (component as any).showHelperComponent.and.returnValue(true); component.ngOnChanges(changes); - expect(component.additionalHelp.emit).toHaveBeenCalled(); + expect((component as any).helperEl.openHelperPopover).toHaveBeenCalled(); + expect((component as any).helperEl.closeHelperPopover).not.toHaveBeenCalled(); }); - it('should toggle the visibility of `p-additional-help-tooltip` is defined', () => { - (component as any).isInitialChange = false; - component.additionalHelpTooltip = 'Mensagem de apoio complementar.'; - component.showAdditionalHelp = true; + it('should close the popover when `showHelperComponent()` is false', () => { + (component as any).showHelperComponent.and.returnValue(false); component.ngOnChanges(changes); - expect(component.poTooltip.toggleTooltipVisibility).toHaveBeenCalledWith(true); + expect((component as any).helperEl.closeHelperPopover).toHaveBeenCalled(); + expect((component as any).helperEl.openHelperPopover).not.toHaveBeenCalled(); + }); + + it('should do nothing when `changes` does not contain `showHelperComponent`', () => { + const otherChanges: SimpleChanges = { + someOtherInput: new SimpleChange(undefined, 'x', false) + } as any; + component.ngOnChanges(otherChanges); + + expect((component as any).helperEl.openHelperPopover).not.toHaveBeenCalled(); + expect((component as any).helperEl.closeHelperPopover).not.toHaveBeenCalled(); }); - it('should not emit the `p-additional-help` event or display `p-additional-help-tooltip` at initialization', () => { - (component as any).isInitialChange = true; + it('should not open/close the popover when `eventOnClick` is a function (since it returns after calling the function)', () => { + const eventOnClickSpy = jasmine.createSpy('eventOnClick'); + (component as any).poHelperComponent.and.returnValue({ eventOnClick: eventOnClickSpy }); + (component as any).showHelperComponent.and.returnValue(true); component.ngOnChanges(changes); - expect(component.additionalHelp.emit).not.toHaveBeenCalled(); - expect(component.poTooltip.toggleTooltipVisibility).not.toHaveBeenCalled(); + expect(eventOnClickSpy).toHaveBeenCalled(); + expect((component as any).helperEl.openHelperPopover).not.toHaveBeenCalled(); + expect((component as any).helperEl.closeHelperPopover).not.toHaveBeenCalled(); }); }); }); diff --git a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.ts b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.ts index f5764140a..7a733975d 100644 --- a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.ts +++ b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.ts @@ -12,6 +12,7 @@ import { } from '@angular/core'; import { PoTooltipDirective } from '../../../../directives'; import { convertToBoolean } from '../../../../utils/util'; +import { PoHelperComponent, PoHelperOptions } from '../../../po-helper'; /** * @docsPrivate @@ -29,10 +30,7 @@ import { convertToBoolean } from '../../../../utils/util'; }) export class PoFieldContainerBottomComponent implements OnChanges { @ViewChild(PoTooltipDirective) poTooltip: PoTooltipDirective; - - /** Texto exibido no tooltip do ícone de ajuda adicional. */ - /** @deprecated v23.x.x */ - @Input('p-additional-help-tooltip') additionalHelpTooltip?: string = ''; + @ViewChild('helperEl', { read: PoHelperComponent, static: false }) helperEl?: PoHelperComponent; /** Define se o tooltip será inserido no `body` em vez do componente. */ @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox: boolean = false; @@ -50,39 +48,29 @@ export class PoFieldContainerBottomComponent implements OnChanges { */ @Input('p-error-limit') errorLimit: boolean = false; + /** Texto de apoio do campo. */ @Input('p-help') help?: string; - /** Ativa a exibição da ajuda adicional. */ - @Input('p-show-additional-help') showAdditionalHelp: boolean = false; - - /** Exibe o ícone de ajuda adicional. */ - @Input('p-show-additional-help-icon') showAdditionalHelpIcon: boolean = false; - /** Define o tamanho do componente. */ @Input('p-size') size?: string; - /** Evento disparado ao clicar no ícone de ajuda adicional. */ - /** @deprecated v23.x.x */ - @Output('p-additional-help') additionalHelp = new EventEmitter(); + /** Configurações do ícone de ajuda adicional vínculado ao label. */ + poHelperComponent = input(undefined, { alias: 'p-helper' }); - /** Propriedade para controlar a visibilidade do additionalHelp de acordo com a visibilidade do p-label do field. - * Caso o p-label esteja visível, o additionalHelp não será exibido. - **/ - hideAdditionalHelpByLabel = input(false, { transform: booleanAttribute, alias: 'p-hide-additional-help-by-label' }); + /** Define se o componente helper estará visível através das ações customizadas */ + showHelperComponent = input(false, { alias: 'p-show-helper' }); private isInitialChange: boolean = true; ngOnChanges(changes: SimpleChanges) { - if (changes.showAdditionalHelp) { - if (!this.isInitialChange) { - if (this.additionalHelpTooltip && this.poTooltip) { - this.poTooltip.toggleTooltipVisibility(this.showAdditionalHelp); - } else { - this.additionalHelp.emit(); - } - } else { - this.isInitialChange = false; + if (changes.showHelperComponent && this.showHelperComponent()) { + if (typeof this.poHelperComponent()?.eventOnClick === 'function') { + this.poHelperComponent()?.eventOnClick(); + return; } + this.helperEl?.openHelperPopover(); + } else if (changes.showHelperComponent && !this.showHelperComponent()) { + this.helperEl?.closeHelperPopover(); } } } diff --git a/projects/ui/src/lib/components/po-field/po-field.model.ts b/projects/ui/src/lib/components/po-field/po-field.model.ts index 46467671e..3a0077923 100644 --- a/projects/ui/src/lib/components/po-field/po-field.model.ts +++ b/projects/ui/src/lib/components/po-field/po-field.model.ts @@ -178,10 +178,6 @@ export abstract class PoFieldModel implements ControlValueAccessor { return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - protected isAdditionalHelpEventTriggered(): boolean { return ( this.additionalHelpEventTrigger === 'event' || diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.spec.ts b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.spec.ts index 4d39fd17b..555d43732 100644 --- a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.spec.ts @@ -518,29 +518,6 @@ describe('PoInputBase:', async () => { }); }); - describe('showAdditionalHelpIcon:', () => { - it('should return true when additionalHelpTooltip is truthy', () => { - (component as any).additionalHelpTooltip = 'additionalHelpTooltip'; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(false); - - expect(component.showAdditionalHelpIcon()).toBeTrue(); - }); - - it('should return true when additionalHelpTooltip is falsy but event is triggered', () => { - (component as any).additionalHelpTooltip = null; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(true); - - expect(component.showAdditionalHelpIcon()).toBeTrue(); - }); - - it('should return false when additionalHelpTooltip is falsy and event not triggered', () => { - (component as any).additionalHelpTooltip = null; - spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(false); - - expect(component.showAdditionalHelpIcon()).toBeFalse(); - }); - }); - describe('getAdditionalHelpTooltip:', () => { it('should return null when isAdditionalHelpEventTriggered returns true', () => { spyOn(component as any, 'isAdditionalHelpEventTriggered').and.returnValue(true); diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts index ba54493c2..6062bbc87 100644 --- a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts @@ -647,10 +647,6 @@ export abstract class PoInputBaseComponent implements ControlValueAccessor, Vali this.validatorChange = fn; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - /** * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`. * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`. diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input.component.html b/projects/ui/src/lib/components/po-field/po-input/po-input.component.html index 983ea2d73..32427fcf0 100644 --- a/projects/ui/src/lib/components/po-field/po-input/po-input.component.html +++ b/projects/ui/src/lib/components/po-field/po-input/po-input.component.html @@ -79,12 +79,7 @@ [p-disabled]="disabled" [p-error-pattern]="getErrorPattern()" [p-error-limit]="errorLimit" - [p-hide-additional-help-by-label]="poHelper.hideAdditionalHelp" - [p-additional-help-tooltip]="getAdditionalHelpTooltip()" - [p-show-additional-help]="displayAdditionalHelp" - [p-show-additional-help-icon]="showAdditionalHelpIcon()" [p-size]="size" - (p-additional-help)="emitAdditionalHelp()" > } diff --git a/projects/ui/src/lib/components/po-field/po-login/po-login.component.html b/projects/ui/src/lib/components/po-field/po-login/po-login.component.html index 06b10fc1a..30681b2c2 100644 --- a/projects/ui/src/lib/components/po-field/po-login/po-login.component.html +++ b/projects/ui/src/lib/components/po-field/po-login/po-login.component.html @@ -63,16 +63,11 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.spec.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.spec.ts index e41b39850..1e247f972 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.spec.ts @@ -304,6 +304,26 @@ describe('PoLookupBaseComponent:', () => { expect(component.change.emit).toHaveBeenCalledWith(1495832652942); }); + it('callOnChange: should call `updateLookupInputHeight` when `autoHeight` is true', fakeAsync(() => { + spyOn(component as any, 'updateLookupInputHeight'); + (component as any).autoHeight = true; + + component.callOnChange('value'); + tick(); + + expect((component as any).updateLookupInputHeight).toHaveBeenCalled(); + })); + + it('callOnChange: should not call `updateLookupInputHeight` when `autoHeight` is false', fakeAsync(() => { + spyOn(component as any, 'updateLookupInputHeight'); + (component as any).autoHeight = false; + + component.callOnChange('value'); + tick(); + + expect((component as any).updateLookupInputHeight).not.toHaveBeenCalled(); + })); + it('call initialize columns in the ngOnInit method', () => { spyOn(component, 'initializeColumn'); @@ -932,6 +952,79 @@ describe('PoLookupBaseComponent:', () => { expect(component.service).toEqual(service); expect(component['defaultService'].setConfig).not.toHaveBeenCalled(); }); + + it('updateLookupInputHeight: should not change `isExpandedHeight` if `inputEl` is undefined', () => { + component['isExpandedHeight'] = false; + component['inputEl'] = undefined; + + component['updateLookupInputHeight'](); + + expect(component['isExpandedHeight']).toBe(false); + }); + + it('updateLookupInputHeight: should set `isExpandedHeight` to true when size is small and height is greater than 32', () => { + const inputElMock: any = { + nativeElement: { + offsetHeight: 40 + } + }; + + (component as any)['_size'] = 'small'; + component['inputEl'] = inputElMock; + component['isExpandedHeight'] = false; + + component['updateLookupInputHeight'](); + + expect(component['isExpandedHeight']).toBe(true); + }); + + it('updateLookupInputHeight: should set `isExpandedHeight` to false when size is small and height is less or equal than 32', () => { + const inputElMock: any = { + nativeElement: { + offsetHeight: 32 + } + }; + + component.size = 'small' as any; + component['inputEl'] = inputElMock; + component['isExpandedHeight'] = true; + + component['updateLookupInputHeight'](); + + expect(component['isExpandedHeight']).toBe(false); + }); + + it('updateLookupInputHeight: should set `isExpandedHeight` to true when size is not small and height is greater than 44', () => { + const inputElMock: any = { + nativeElement: { + offsetHeight: 50 + } + }; + + component.size = 'medium' as any; + component['inputEl'] = inputElMock; + component['isExpandedHeight'] = false; + + component['updateLookupInputHeight'](); + + expect(component['isExpandedHeight']).toBe(true); + }); + + it('updateLookupInputHeight: should set `isExpandedHeight` to false when size is not small and height is less or equal than 44', () => { + const inputElMock: any = { + nativeElement: { + offsetHeight: 44 + } + }; + + component.size = 'medium' as any; + component['inputEl'] = inputElMock; + component['isExpandedHeight'] = true; + + component['updateLookupInputHeight'](); + + expect(component['isExpandedHeight']).toBe(false); + }); }); describe('Properties:', () => { diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts index 0b6c6af1c..003a245df 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts @@ -1,6 +1,7 @@ import { AfterViewInit, Directive, + ElementRef, EventEmitter, Inject, InjectOptions, @@ -11,7 +12,8 @@ import { OnDestroy, OnInit, Output, - SimpleChanges + SimpleChanges, + ViewChild } from '@angular/core'; import { AbstractControl, ControlValueAccessor, NgControl, UntypedFormControl, Validator } from '@angular/forms'; import { Subscription } from 'rxjs'; @@ -76,6 +78,7 @@ export abstract class PoLookupBaseComponent private _size?: string = undefined; private _spacing: PoTableColumnSpacing; + @ViewChild('inp', { read: ElementRef, static: false }) inputEl: ElementRef; // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip). @Input() additionalHelpEventTrigger: string | undefined; @@ -587,6 +590,7 @@ export abstract class PoLookupBaseComponent // eslint-disable-next-line protected onTouched: any = null; protected resizeListener: () => void; + protected isExpandedHeight: boolean = false; private _disabled?: boolean = false; private _fieldLabel: string; @@ -818,6 +822,12 @@ export abstract class PoLookupBaseComponent // Armazenar o valor antigo do model this.oldValueToModel = this.valueToModel; + + setTimeout(() => { + if (this.autoHeight) { + this.updateLookupInputHeight(); + } + }); } searchById(value) { @@ -962,6 +972,17 @@ export abstract class PoLookupBaseComponent } } + private updateLookupInputHeight(): void { + if (!this.inputEl) return; + + const height = this.inputEl.nativeElement.offsetHeight; + if (this.size === PoFieldSize.Small) { + this.isExpandedHeight = height > 32; + } else { + this.isExpandedHeight = height > 44; + } + } + // Atribui um ou mais valores ao campo. abstract setViewValue(value: any, object: any): void; diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html index e3022a7cb..c0ffa46b6 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html @@ -92,6 +92,7 @@ [class.po-lookup-input-padding-button-clean-aa]="clean && size === 'small'" [class.po-lookup-input-disabled]="disabled" [class.po-lookup-input-aa]="size === 'small'" + [class.po-lookup-input-auto-dynamic-height]="isExpandedHeight" (blur)="onBlur()" (keydown)="onKeyDown($event)" > @@ -147,17 +148,12 @@ } diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts index 4e5959971..119df76c0 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts @@ -155,8 +155,6 @@ export class PoLookupComponent private cd = inject(ChangeDetectorRef); private el = inject(ElementRef); - @ViewChild('inp', { read: ElementRef, static: false }) inputEl: ElementRef; - @ViewChild('helperEl', { read: PoHelperComponent, static: false }) helperEl?: PoHelperComponent; initialized = false; timeoutResize; @@ -511,10 +509,6 @@ export class PoLookupComponent return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - setHelper(label?: string, additionalHelpTooltip?: string) { return setHelperSettings( label, diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html index 0c12950c7..26b1335f8 100644 --- a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html +++ b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html @@ -88,17 +88,12 @@ } diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts index 2c9c1ece6..10e643788 100644 --- a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts +++ b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts @@ -563,10 +563,6 @@ export class PoMultiselectComponent return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - wasClickedOnToggle(event: MouseEvent): void { if ( this.dropdownOpen && diff --git a/projects/ui/src/lib/components/po-field/po-number/po-number.component.html b/projects/ui/src/lib/components/po-field/po-number/po-number.component.html index 703a1ad00..10b65920f 100644 --- a/projects/ui/src/lib/components/po-field/po-number/po-number.component.html +++ b/projects/ui/src/lib/components/po-field/po-number/po-number.component.html @@ -77,17 +77,12 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-password/po-password.component.html b/projects/ui/src/lib/components/po-field/po-password/po-password.component.html index 19d4a7f50..2acc2f0b4 100644 --- a/projects/ui/src/lib/components/po-field/po-password/po-password.component.html +++ b/projects/ui/src/lib/components/po-field/po-password/po-password.component.html @@ -78,16 +78,11 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.html b/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.html index 7024deabe..982240936 100644 --- a/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.html +++ b/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.html @@ -36,30 +36,14 @@ - - + diff --git a/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.ts b/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.ts index 581bd96d3..1656c067a 100644 --- a/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.ts +++ b/projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group.component.ts @@ -236,10 +236,6 @@ export class PoRadioGroupComponent extends PoRadioGroupBaseComponent implements return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - setHelper(label?: string, additionalHelpTooltip?: string) { return setHelperSettings( label, diff --git a/projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.html b/projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.html index fb33fd17d..9579c1e16 100644 --- a/projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.html +++ b/projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.html @@ -40,21 +40,15 @@ } - + @if (!readonly) { + + } diff --git a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html index 0cf4bef4f..a81166f66 100644 --- a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html +++ b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html @@ -82,17 +82,12 @@ @if (!readonly) { } diff --git a/projects/ui/src/lib/components/po-field/po-switch/po-switch.component.html b/projects/ui/src/lib/components/po-field/po-switch/po-switch.component.html index 11f274579..5de4e587b 100644 --- a/projects/ui/src/lib/components/po-field/po-switch/po-switch.component.html +++ b/projects/ui/src/lib/components/po-field/po-switch/po-switch.component.html @@ -61,16 +61,11 @@ } diff --git a/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.html b/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.html index 8bac79c13..4b4069790 100644 --- a/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.html +++ b/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.html @@ -29,31 +29,16 @@ [rows]="rows" > - + @if (!readonly) { + + } diff --git a/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.ts b/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.ts index be9303beb..b137502c3 100644 --- a/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.ts +++ b/projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.ts @@ -239,10 +239,6 @@ export class PoTextareaComponent extends PoTextareaBaseComponent implements Afte return this.displayAdditionalHelp; } - showAdditionalHelpIcon() { - return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered(); - } - private isAdditionalHelpEventTriggered(): boolean { return ( this.additionalHelpEventTrigger === 'event' || diff --git a/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.html b/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.html index d18326360..936db1778 100644 --- a/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.html +++ b/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.html @@ -204,30 +204,14 @@ } - - + { if (this.autoUpload) {