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() {