diff --git a/projects/ui/src/lib/components/po-field/po-field.module.ts b/projects/ui/src/lib/components/po-field/po-field.module.ts index 36eb5190f9..4c6188fade 100644 --- a/projects/ui/src/lib/components/po-field/po-field.module.ts +++ b/projects/ui/src/lib/components/po-field/po-field.module.ts @@ -55,6 +55,7 @@ import { PoUrlComponent } from './po-url/po-url.component'; import { PoCheckboxModule } from './po-checkbox/po-checkbox.module'; import { PoSwitchModule } from './po-switch/po-switch.module'; import { PoLabelModule } from '../po-label'; +import { PoTagComponent, PoTagModule } from '../po-tag'; /** * @description @@ -96,7 +97,8 @@ import { PoLabelModule } from '../po-label'; PoRadioModule, PoLabelModule, PoListBoxModule, - PoSwitchModule + PoSwitchModule, + PoTagModule ], exports: [ PoCheckboxGroupModule, @@ -125,7 +127,8 @@ import { PoLabelModule } from '../po-label'; PoCheckboxModule, PoRadioModule, PoLabelModule, - PoSwitchModule + PoSwitchModule, + PoTagModule ], declarations: [ PoComboComponent, 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 1ba312e381..68c4bbbe34 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 @@ -6,6 +6,7 @@ [p-required]="required" [p-show-required]="showRequired" > + {{ initializedOnKeyDown }}
- - + [p-disabled]="disabled" + (p-close)="closeDisclaimer(disclaimer[fieldValue])" + (p-click)="closeDisclaimer(disclaimer[fieldValue])" + >
; @@ -137,6 +137,28 @@ export class PoMultiselectComponent this.focus(); } this.initialized = true; + + setTimeout(() => { + const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove'); + console.log(tagRemoveElements); + tagRemoveElements.forEach((tagRemoveElement, index) => { + console.log(tagRemoveElement); + this.renderer.setProperty(tagRemoveElement, 'tabindex', 0); + + this.renderer.listen(tagRemoveElement, 'keydown', event => { + this.initializedOnKeyDown = true; + if (event.key === 'ArrowLeft') { + if (index > 0) { + tagRemoveElements[index - 1].focus(); + } + } else if (event.key === 'ArrowRight') { + if (index < tagRemoveElements.length - 1) { + tagRemoveElements[index + 1].focus(); + } + } + }); + }); + }, 0); } ngOnChanges(changes: SimpleChanges) { @@ -189,7 +211,7 @@ export class PoMultiselectComponent } getDisclaimersWidth() { - const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer'); + const disclaimers = this.el.nativeElement.querySelectorAll('po-tag'); return Array.from(disclaimers).map(disclaimer => disclaimer['offsetWidth']); } @@ -273,16 +295,16 @@ export class PoMultiselectComponent } onKeyDown(event?: any) { - if (event.keyCode === PoKeyCodeEnum.left || event.keyCode === PoKeyCodeEnum.right) { - const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer'); - disclaimers.forEach((disclaimer, index) => { - const spanElement = disclaimer.querySelector(':scope .po-disclaimer-remove'); - if (spanElement) { - this.addKeyListener(spanElement, disclaimers, index, event); - } - }); - return; - } + // if (event.keyCode === PoKeyCodeEnum.left || event.keyCode === PoKeyCodeEnum.right) { + // const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer'); + // disclaimers.forEach((disclaimer, index) => { + // const spanElement = disclaimer.querySelector(':scope .po-disclaimer-remove'); + // if (spanElement) { + // this.addKeyListener(spanElement, disclaimers, index, event); + // } + // }); + // return; + // } if ( (event.keyCode === PoKeyCodeEnum.tab && this.visibleDisclaimers.length > 1) || @@ -322,23 +344,6 @@ export class PoMultiselectComponent } } - private addKeyListener(spanElement: any, disclaimers: any, index: number, event: any) { - this.renderer.listen(spanElement, 'keydown', eventKey => { - switch (eventKey.keyCode) { - case PoKeyCodeEnum.left: - this.focusPreviousDisclaimer(disclaimers, index); - break; - case PoKeyCodeEnum.right: - this.focusNextDisclaimer(disclaimers, index); - break; - case PoKeyCodeEnum.arrowDown: - event.preventDefault(); - this.controlDropdownVisibility(true); - break; - } - }); - } - private focusPreviousDisclaimer(disclaimers: any, index: number) { const prevDisclaimer = disclaimers[index - 1]; if (prevDisclaimer) { @@ -409,11 +414,25 @@ export class PoMultiselectComponent } closeDisclaimer(value) { - const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value); - this.selectedOptions.splice(index, 1); - - this.updateVisibleItems(); - this.callOnChange(this.selectedOptions); + console.log(value); + console.log(this.selectedOptions); + console.log(this.visibleDisclaimers); + // criar funcao que se value estiver vazio remover de visubleOptionsDropdown todos os que nao estao em visibleDisclaimers + if (!value) { + console.log('veio vazio'); + for (let option of this.visibleDisclaimers) { + if (!this.selectedOptions.includes(option)) { + this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1); + this.updateVisibleItems(); + this.callOnChange(this.selectedOptions); + } + } + } else { + const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value); + this.selectedOptions.splice(index, 1); + this.updateVisibleItems(); + this.callOnChange(this.selectedOptions); + } } wasClickedOnToggle(event: MouseEvent): void { diff --git a/projects/ui/src/lib/components/po-tag/po-tag.component.html b/projects/ui/src/lib/components/po-tag/po-tag.component.html index 5e4a24f012..554fc65eb6 100644 --- a/projects/ui/src/lib/components/po-tag/po-tag.component.html +++ b/projects/ui/src/lib/components/po-tag/po-tag.component.html @@ -1,16 +1,11 @@ -
+
{{ tagOrientation ? label + ':' : label }}
-
+
155; + return this.poTag.nativeElement.offsetWidth > 155; } setAriaLabel() {