Skip to content

Commit 77a7105

Browse files
ana.espejoanderson-gregorio-totvs
ana.espejo
authored and
anderson-gregorio-totvs
committed
fix(listbox): ajusta dimensões do loading-overlay no po-listbox
Componente loading-overlay não está respeitando as dimensões do po-listbox. Ajusta dimensões do loading-overlay no componente po-listbox. fixes DTHFUI-8490
1 parent f46e1f5 commit 77a7105

14 files changed

+375
-185
lines changed

‎projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const PO_COMBO_FIELD_VALUE_DEFAULT = 'value';
5656
* | `--color` | Cor principal do Combo | `var(--color-neutral-dark-70)` |
5757
* | `--background` | Cor de background | `var(--color-neutral-light-05)` |
5858
* | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-width-lg)` |
59+
* | `--min-width` | Largura mínima do combo | `150px`
5960
* | **Hover** | | |
6061
* | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
6162
* | `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` |

‎projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html‎

Lines changed: 101 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,112 @@
1-
<po-field-container
2-
[p-disabled]="disabled"
3-
[p-id]="id"
4-
[p-label]="label"
5-
[p-optional]="optional"
6-
[p-required]="required"
7-
[p-show-required]="showRequired"
8-
>
9-
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content po-combo-container-content">
10-
<div *ngIf="icon" class="po-field-icon-container-left">
11-
<po-icon class="po-field-icon po-icon-input" [class.po-field-icon-disabled]="disabled" [p-icon]="icon"></po-icon>
12-
</div>
1+
<div #outerContainer>
2+
<po-field-container
3+
[p-disabled]="disabled"
4+
[p-id]="id"
5+
[p-label]="label"
6+
[p-optional]="optional"
7+
[p-required]="required"
8+
[p-show-required]="showRequired"
9+
>
10+
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content po-combo-container-content">
11+
<div *ngIf="icon" class="po-field-icon-container-left">
12+
<po-icon
13+
class="po-field-icon po-icon-input"
14+
[class.po-field-icon-disabled]="disabled"
15+
[p-icon]="icon"
16+
></po-icon>
17+
</div>
1318

14-
<input
15-
#inp
16-
class="po-combo-input"
17-
[ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
18-
[class.po-input-icon-left]="icon"
19-
autocomplete="off"
20-
type="text"
21-
[attr.name]="name"
22-
[disabled]="disabled"
23-
[id]="id"
24-
[placeholder]="disabled ? '' : placeholder"
25-
[required]="required"
26-
(click)="toggleComboVisibility()"
27-
(keyup)="onKeyUp($event)"
28-
(blur)="onBlur()"
29-
(keyup)="searchOnEnterOrArrow($event, $event.target.value)"
30-
(keydown)="onKeyDown($event)"
31-
/>
19+
<input
20+
#inp
21+
class="po-combo-input"
22+
[ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
23+
[class.po-input-icon-left]="icon"
24+
autocomplete="off"
25+
type="text"
26+
[attr.name]="name"
27+
[disabled]="disabled"
28+
[id]="id"
29+
[placeholder]="disabled ? '' : placeholder"
30+
[required]="required"
31+
(click)="toggleComboVisibility()"
32+
(keyup)="onKeyUp($event)"
33+
(blur)="onBlur()"
34+
(keyup)="searchOnEnterOrArrow($event, $event.target.value)"
35+
(keydown)="onKeyDown($event)"
36+
/>
3237

33-
<div class="po-field-icon-container-right">
34-
<po-clean
35-
tabindex="0"
36-
role="button"
37-
[attr.aria-label]="literals.clean"
38-
class="po-combo-clean po-icon-input"
39-
*ngIf="clean && !disabled && inp.value"
40-
[p-element-ref]="inputEl"
41-
(p-change-event)="clear($event)"
42-
(click)="clear(null); $event.preventDefault()"
43-
(keydown.enter)="clearAndFocus(); $event.preventDefault()"
44-
>
45-
</po-clean>
38+
<div class="po-field-icon-container-right">
39+
<po-clean
40+
tabindex="0"
41+
role="button"
42+
[attr.aria-label]="literals.clean"
43+
class="po-combo-clean po-icon-input"
44+
*ngIf="clean && !disabled && inp.value"
45+
[p-element-ref]="inputEl"
46+
(p-change-event)="clear($event)"
47+
(click)="clear(null); $event.preventDefault()"
48+
(keydown.enter)="clearAndFocus(); $event.preventDefault()"
49+
>
50+
</po-clean>
4651

47-
<div
48-
#iconArrow
49-
class="po-combo-arrow po-field-icon"
50-
[class.po-field-icon-disabled]="disabled"
51-
(click)="toggleComboVisibility(true)"
52-
>
53-
<po-icon
54-
[p-icon]="comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'"
55-
[class.po-field-icon]="!disabled"
56-
[class.po-combo-default-border]="!disabled && inp.value"
57-
[class.po-combo-background-arrow-up]="!disabled && comboOpen"
58-
></po-icon>
52+
<div
53+
#iconArrow
54+
class="po-combo-arrow po-field-icon"
55+
[class.po-field-icon-disabled]="disabled"
56+
(click)="toggleComboVisibility(true)"
57+
>
58+
<po-icon
59+
[p-icon]="comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'"
60+
[class.po-field-icon]="!disabled"
61+
[class.po-combo-default-border]="!disabled && inp.value"
62+
[class.po-combo-background-arrow-up]="!disabled && comboOpen"
63+
></po-icon>
64+
</div>
5965
</div>
6066
</div>
61-
</div>
6267

63-
<ng-container *ngIf="appendBox; then dropdownCDK; else dropdownDefault"> </ng-container>
68+
<ng-container *ngIf="appendBox; then dropdownCDK; else dropdownDefault"> </ng-container>
6469

65-
<ng-template #dropdownDefault>
66-
<ng-container *ngTemplateOutlet="dropdownListbox"> </ng-container>
67-
</ng-template>
70+
<ng-template #dropdownDefault>
71+
<ng-container *ngTemplateOutlet="dropdownListbox"> </ng-container>
72+
</ng-template>
6873

69-
<ng-template #dropdownCDK>
70-
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="true">
71-
<ng-container *ngTemplateOutlet="dropdownListbox"></ng-container>
74+
<ng-template #dropdownCDK>
75+
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="true">
76+
<ng-container *ngTemplateOutlet="dropdownListbox"></ng-container>
77+
</ng-template>
7278
</ng-template>
73-
</ng-template>
7479

75-
<po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>
76-
</po-field-container>
80+
<po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>
81+
</po-field-container>
7782

78-
<ng-template #dropdownListbox>
79-
<div #containerElement class="po-combo-container" [hidden]="!comboOpen && !isServerSearching">
80-
<po-listbox
81-
#poListbox
82-
#contentElement
83-
p-type="option"
84-
[p-items]="visibleOptions"
85-
[p-field-value]="dynamicValue"
86-
[p-field-label]="dynamicLabel"
87-
[p-template]="comboOptionTemplate"
88-
[p-search-value]="getInputValue()"
89-
[p-infinite-loading]="infiniteLoading"
90-
[p-infinite-scroll]="infiniteScroll"
91-
[p-filtering]="isFiltering"
92-
[p-cache]="cache"
93-
(p-selectcombo-item)="onOptionClick($event, $event.event)"
94-
[p-filter-mode]="filterMode"
95-
[p-visible]="comboOpen"
96-
[p-is-searching]="isServerSearching"
97-
[p-should-mark-letter]="shouldMarkLetters"
98-
[p-compare-cache]="compareObjects(cacheOptions, visibleOptions)"
99-
[p-combo-service]="service"
100-
[p-infinite-scroll-distance]="infiniteScrollDistance"
101-
(p-update-infinite-scroll)="showMoreInfiniteScroll()"
102-
(p-close)="onCloseCombo()"
103-
></po-listbox>
104-
</div>
105-
</ng-template>
83+
<ng-template #dropdownListbox>
84+
<div #containerElement class="po-combo-container" [hidden]="!comboOpen && !isServerSearching">
85+
<po-listbox
86+
#poListbox
87+
#contentElement
88+
p-type="option"
89+
[p-items]="visibleOptions"
90+
[p-field-value]="dynamicValue"
91+
[p-field-label]="dynamicLabel"
92+
[p-template]="comboOptionTemplate"
93+
[p-search-value]="getInputValue()"
94+
[p-infinite-loading]="infiniteLoading"
95+
[p-infinite-scroll]="infiniteScroll"
96+
[p-filtering]="isFiltering"
97+
[p-cache]="cache"
98+
(p-selectcombo-item)="onOptionClick($event, $event.event)"
99+
[p-filter-mode]="filterMode"
100+
[p-visible]="comboOpen"
101+
[p-is-searching]="isServerSearching"
102+
[p-should-mark-letter]="shouldMarkLetters"
103+
[p-compare-cache]="compareObjects(cacheOptions, visibleOptions)"
104+
[p-combo-service]="service"
105+
[p-infinite-scroll-distance]="infiniteScrollDistance"
106+
(p-update-infinite-scroll)="showMoreInfiniteScroll()"
107+
(p-close)="onCloseCombo()"
108+
[p-container-width]="containerWidth"
109+
></po-listbox>
110+
</div>
111+
</ng-template>
112+
</div>

‎projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const poComboContainerPositionDefault = 'bottom';
101101
})
102102
export class PoComboComponent extends PoComboBaseComponent implements AfterViewInit, OnChanges, OnDestroy {
103103
@ContentChild(PoComboOptionTemplateDirective, { static: true }) comboOptionTemplate: PoComboOptionTemplateDirective;
104-
104+
@ViewChild('outerContainer ', { read: ElementRef }) outerContainer: ElementRef;
105105
@ViewChild('containerElement', { read: ElementRef }) containerElement: ElementRef;
106106
@ViewChild('contentElement', { read: ElementRef }) contentElement: ElementRef;
107107
@ViewChild('iconArrow', { read: ElementRef, static: true }) iconElement: ElementRef;
@@ -116,6 +116,7 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
116116
scrollTop = 0;
117117
shouldMarkLetters: boolean = true;
118118
infiniteLoading: boolean = false;
119+
containerWidth: number;
119120

120121
private _isServerSearching: boolean = false;
121122
private lastKey;
@@ -163,6 +164,8 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
163164
if (this.autoFocus) {
164165
this.focus();
165166
}
167+
168+
this.setContainerWidth();
166169
}
167170

168171
ngOnChanges(changes: SimpleChanges) {
@@ -648,6 +651,9 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
648651
: this.inputEl.nativeElement.focus();
649652

650653
this.setContainerPosition();
654+
if (this.comboOpen) {
655+
this.setContainerWidth();
656+
}
651657
}
652658

653659
private removeListeners() {
@@ -674,6 +680,12 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
674680
this.adjustContainerPosition();
675681
}
676682

683+
private setContainerWidth(): void {
684+
if (this.outerContainer) {
685+
this.containerWidth = this.outerContainer.nativeElement.offsetWidth;
686+
}
687+
}
688+
677689
private setOptions() {
678690
return this.getInputValue() ? this.options : [];
679691
}

‎projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
(p-change-all)="onClickSelectAll()"
2222
(p-change-search)="callChangeSearch($event)"
2323
(p-close)="closeDropdown.emit()"
24+
[p-container-width]="containerWidth"
2425
>
2526
</po-listbox>
2627
</ng-container>

‎projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export class PoMultiselectDropdownComponent {
5757

5858
@Input('p-multiselect-template') multiselectTemplate: TemplateRef<any> | any;
5959

60+
@Input('p-container-width') containerWidth: number;
61+
6062
/** Evento disparado a cada tecla digitada na pesquisa. */
6163
@Output('p-change-search') changeSearch = new EventEmitter();
6264

0 commit comments

Comments
 (0)