diff --git a/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss b/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
index 33ec3684a976491fa221d308eb32ad8f3a7ebe50..77b40e0185b6bf714e946d4a1ff74f3c415dab42 100644
--- a/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
+++ b/src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss
@@ -95,7 +95,7 @@ dlcm-theme-selector ::ng-deep {
background-color: $dark-grey;
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
background-color: $grey;
}
diff --git a/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html b/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
index 4afb288bd6c332b91eb208e0711b49f3443c4e09..6a37aa5c28cafca76dc08149e19da18bf83f3edc 100644
--- a/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
+++ b/src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html
@@ -48,7 +48,8 @@
<button *ngIf="!readonly"
mat-flat-button
color="primary"
- (keydown.enter)="onSubmit()"
+ solidifyShortCuts
+ (onEnter)="onSubmit()"
type="submit"
[disabled]="!form.valid || !form.dirty"
>
diff --git a/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss b/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
index 713ec030c7cb1a04dd8d5918f5e87c99897e0aa6..74a027768fb5e2acc6f78463f21068ce32294025 100644
--- a/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
+++ b/src/app/features/home/components/presentationals/home-browsing-org-unit/home-browsing-org-unit.presentational.scss
@@ -37,7 +37,7 @@ $padding-vertical: 10px;
background-color: $extra-light-grey
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
cursor: initial;
background-color: $extra-light-grey
}
diff --git a/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html b/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
index b9561a42d800b9f19549ad397acb3338c73b23b4..d5857e7e819a26990925353f593cbb1865210271 100644
--- a/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
+++ b/src/app/shared/components/containers/shared-tabs/shared-tabs.container.html
@@ -1,7 +1,6 @@
<ul class="tabs-header-container">
<li *ngFor="let tab of tabs; trackBy: trackByFn"
class="tab-header"
- tabindex="0"
[tabIndex]="0"
[class.hide]="!(isDisplayed(tab) | async)"
[class.is-active]="tab === currentTab"
diff --git a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
index 53af944e984a7595f2d28c0ba75a8263b6441eab..e606739186faa4c3218a59799dced286989a9e55 100644
--- a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
+++ b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.scss
@@ -90,7 +90,7 @@ $min-height-result: $height-overlay/2 + $height-input;
color: $primary-color;
}
- &.is-keybord-selected {
+ &.is-keyboard-selected {
background-color: rgba(0, 0, 0, 0.04);
color: $primary-color;
}
diff --git a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
index 849b4e494d6cd46a713d050d98157454b3efcfee..89f21b724775881ca7dce03f372dfb330d351c2b 100644
--- a/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-abstract-content/shared-abstract-content.presentational.ts
@@ -10,7 +10,6 @@ import {
BehaviorSubject,
Observable,
} from "rxjs";
-import {take} from "rxjs/operators";
import {
BaseResourceType,
isEmptyString,
@@ -31,6 +30,9 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
@Output("closeByTabChange")
readonly closeByTabObs: Observable<void> = ObservableUtil.asObservable(this._closeByTabBS);
+ private readonly _closeByShiftTabBS: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);
+ @Output("closeByShiftTabChange")
+ readonly closeByShiftTabObs: Observable<void> = ObservableUtil.asObservable(this._closeByShiftTabBS);
constructor() {
super();
@@ -40,6 +42,9 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
this._closeByTabBS.next();
}
+ closeByShiftTab(): void {
+ this._closeByShiftTabBS.next();
+ }
ngOnInit(): void {
super.ngOnInit();
@@ -65,6 +70,7 @@ export abstract class SharedAbstractContentPresentational<TResource extends Base
}
selectNextResource(): void {
+ debugger
const val = this.host.list;
let activeValIndex = -1;
for (let index = 0; index < val.length; index++) {
diff --git a/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts b/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
index 40250951f6e80ba29d0a9d3cafd20434445765ca..efd8a77d56b56ca8e4657f2e9f945200d8a8c742 100644
--- a/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-abstract-multi-select/shared-abstract-multi-select.presentational.ts
@@ -209,37 +209,54 @@ export abstract class SharedAbstractMultiSelectPresentational<TResource extends
this._closeOverlay(overlayRef);
}),
));
- this.subscribe(componentRef.instance.closeByTabObs.pipe(
- tap(() => {
- this.closeOverlays();
- },
- )));
}
private _observeClickBackdrop(componentRef: ComponentRef<SharedAbstractContentPresentational<TResource>>, overlayRef: OverlayRef): void {
+
this.subscribe(overlayRef.backdropClick().pipe(
tap(() => {
this._closeOverlay(overlayRef);
}),
));
+ this.subscribe(componentRef.instance.closeByTabObs.pipe(
+ tap(() => {
+ debugger
+ this._closeOverlay(overlayRef, true);
+ },
+ )));
+ this.subscribe(componentRef.instance.closeByShiftTabObs.pipe(
+ tap(() => {
+ debugger
+ this._closeOverlay(overlayRef, false);
+ },
+ )));
}
- private _closeOverlay(overlayRef: OverlayRef, keepInOverlayRefs?: boolean): void {
+ private _closeOverlay(overlayRef: OverlayRef, isByTab: boolean = true, keepInOverlayRefs?: boolean): void {
+ debugger
overlayRef.detach();
if (!keepInOverlayRefs) {
this._overlayRefs.delete(overlayRef);
}
- this._tabulationService.focusNext(this._elementToReFocus);
-
this.formControl.markAsTouched();
this._changeDetector.detectChanges();
+ if (isByTab) {
+ this._tabulationService.focusNext(this._elementToReFocus);
+ } else {
+ this._tabulationService.focusPrev(this._elementToReFocus);
+ }
}
- closeOverlays(): void {
- this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, true));
+ private _closeOverlays(isByTab: boolean = true): void {
+ this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, isByTab, true));
this._overlayRefs.clear();
}
+ closeOverlays(keyEvent: KeyboardEvent, isByTab: boolean = true): void {
+ keyEvent.preventDefault();
+ this._closeOverlays(isByTab);
+ }
+
private _getPosition(elementToConnectTo: ElementRef): FlexibleConnectedPositionStrategy {
return this._overlay.position()
.flexibleConnectedTo(elementToConnectTo)
diff --git a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
index a1ff7a9b1710b922463487790e0adcd4b8b3b69c..4d08f8c19374e892b36bdf78957b33ec4adc0525 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.html
@@ -1,39 +1,48 @@
<lib-empty-container solidifyShortCuts
- (onEscape)="close()">
-<div class="button-wrapper">
- <mat-icon class="close"
- (click)="close()"
- >close
- </mat-icon>
-</div>
-<div class="result"
- [class.no-data]="host?.list?.length === 0"
+ cdkTrapFocus
+ [solidifyFocusFirstElement]="true"
+ (keydown.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
+ (onEscape)="close()"
+ (keydown.enter)="select(host.list[indexSelected])"
>
- <ng-template [ngIf]="host.list | isNonEmptyArray"
- [ngIfElse]="noData"
+ <a [tabindex]="0"
+ ></a>
+ <div class="button-wrapper">
+ <mat-icon class="close"
+ (click)="close()"
+ >close
+ </mat-icon>
+ </div>
+ <div class="result"
+ [class.no-data]="host?.list?.length === 0"
>
+ <ng-template [ngIf]="host.list | isNonEmptyArray"
+ [ngIfElse]="noData"
+ >
- <ul>
- <ng-container *ngFor="let value of host.list">
- <li *ngIf="!host.hideItemSelected || !isActive(value)"
- [value]="value[host.valueKey]"
- [class.is-active]="isActive(value)"
- (click)="select(value)"
- >
- <span class="label">{{value[host.labelKey]}}</span>
- <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
- class="extra-info"
- ><img *ngIf="host.extraInfoImage"
- [src]="'assets/images/'+ host.extraInfoImage"
- [alt]="host.extraInfoImage"
+ <ul>
+ <ng-container *ngFor="let value of host.list; let i = index">
+ <li *ngIf="!host.hideItemSelected || !isActive(value)"
+ [value]="value[host.valueKey]"
+ [class.is-keyboard-selected]="i === indexSelected"
+ [class.is-active]="isActive(value)"
+ (click)="select(value)"
>
- {{value[host.extraInfoLabelKey]}}</span>
- </li>
- </ng-container>
- </ul>
- </ng-template>
- <ng-template #noData>
- {{noDataToSelect | translate}}
- </ng-template>
-</div>
+ <span class="label">{{value[host.labelKey]}}</span>
+ <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
+ class="extra-info"
+ ><img *ngIf="host.extraInfoImage"
+ [src]="'assets/images/'+ host.extraInfoImage"
+ [alt]="host.extraInfoImage"
+ >
+ {{value[host.extraInfoLabelKey]}}</span>
+ </li>
+ </ng-container>
+ </ul>
+ </ng-template>
+ <ng-template #noData>
+ {{noDataToSelect | translate}}
+ </ng-template>
+ </div>
</lib-empty-container>
diff --git a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
index 16c92cd7446fe6f2155cd55f9c927e35d846fca7..91758a125c3a3b7dc1af39b9ede3bb06d1348345 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-multi-select-content/shared-multi-select-content.presentational.ts
@@ -25,8 +25,6 @@ import {
})
export class SharedMultiSelectContentPresentational<TResource extends BaseResourceType> extends SharedAbstractContentPresentational<TResource> {
- // TODO add navigation to this component when issue of host fixed.
-
@Input()
host: any; // (SharedMultiSelectPresentational<TResource>;) CAUSE RUNTIME ERROR WHEN AOT BUILD WITHOUT SOURCEMAP. Following error on polyfills.js: Uncaught TypeError: Object prototype may only be an Object or null: undefined
diff --git a/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html b/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
index 0d6155ac846858cfd4026f7bfa0e13af2aa0c590..df8cd9fa6f171463783418bd104b941342b01cfa 100644
--- a/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select-default-value-content/shared-multi-select-default-value-content.presentational.html
@@ -1,7 +1,8 @@
<lib-empty-container [solidifyFocusFirstElement]="true"
solidifyShortCuts
cdkTrapFocus
- (keydown.tab)="close()"
+ (keydown.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
(onEscape)="close()"
(onEnter)="select(host.list[indexSelected])"
>
@@ -28,7 +29,7 @@
<li *ngIf="!host.hideItemSelected || !isActive(value)"
[value]="value[host.valueKey]"
- [class.is-keybord-selected]="indexSelected === i"
+ [class.is-keyboard-selected]="indexSelected === i"
[class.is-active]="isActive(value)"
(click)="select(value)"
>
diff --git a/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html b/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
index 322916b697df389ad988c0752d2223a2a23f9fe7..df77a9bed9aff7303e6d1cac203bbe42de9a19e1 100644
--- a/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
+++ b/src/app/shared/components/presentationals/shared-multi-select/shared-multi-select.presentational.html
@@ -64,8 +64,6 @@
#input
matInput
(focus)="openOverlay(input)"
- (keydown.tab)="closeOverlays()"
- (keydown.shift.tab)="closeOverlays()"
readonly
[placeholder]="placeholder ? placeholder : ('component.multiSelect.placeholder' | translate)"
[disabled]="formControl.disabled"
diff --git a/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html b/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
index d17df98231eafdef2f71ef024d7cd6fe57aaf629..6b574c752b54f4ff4d6566597f1b89007adf32fa 100644
--- a/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-multi-select-content/shared-searchable-multi-select-content.presentational.html
@@ -2,7 +2,8 @@
[dlcmAutoScrollIntoView]="!navigationResId"
(keydown.tab)="closeByTab()"
(keydown.escape)="closeByTab()"
- (keydown.shift.tab)="closeByTab()">
+ (keydown.shift.tab)="closeByShiftTab()"
+>
<div class="input">
<mat-form-field class="form-field">
<input #input
@@ -28,7 +29,7 @@
<li *ngIf="!host.hideItemSelected || !isActive(value)"
[value]="value[host.valueKey]"
[dlcmAutoScrollIntoView]="value.resId === navigationResId"
- [class.is-keybord-selected]="value.resId === navigationResId"
+ [class.is-keyboard-selected]="value.resId === navigationResId"
[class.is-active]="isActive(value)"
(click)="select(value)"
>
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html b/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
index c985e3dfd54be0689bc9012d5fa55105b8355c9d..19b18d5cedd4b22033457b4b8e5473bd193923e0 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select-content/shared-searchable-single-select-content.presentational.html
@@ -1,6 +1,6 @@
<form [formGroup]="form"
[dlcmAutoScrollIntoView]="!navigationResId"
- (keydown.shift.tab)="closeByTab()"
+ (keydown.shift.tab)="closeByShiftTab()"
(keydown.enter)="select(getFocusedResource())"
(keydown.tab)="closeByTab()">
<div class="input">
@@ -28,7 +28,7 @@
<li #itemList *ngFor="let value of (listObs | async)"
[value]="value[host.valueKey]"
[dlcmAutoScrollIntoView]="value.resId === navigationResId"
- [class.is-keybord-selected]="value.resId === navigationResId"
+ [class.is-keyboard-selected]="value.resId === navigationResId"
[class.is-active]="isActive(value)"
(keydown.enter)="select(getFocusedResource())"
(click)="select(value)"
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
index 035925d24749f37f2a8b4449997561bbe7179202..8d569d920ca8609e014da6e9d841ca630fd45a7f 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.html
@@ -17,8 +17,8 @@
<input #inputElement
matInput
[autocomplete]="'off'"
- (keydown.tab)="closeOverlays()"
- (keydown.shift.tab)="closeOverlays()"
+ (keydown.tab)="closeOverlays(true)"
+ (keydown.shift.tab)="closeOverlays(false)"
(focus)="openOverlay($event)"
[formControlName]="formDefinition.value"
>
diff --git a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
index 9314a94e68ab23a0db755e7530319c0ecf9147d6..4b3cdfdacc597c35fd1a8c4edbbe0b7d305a3998 100644
--- a/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
+++ b/src/app/shared/components/presentationals/shared-searchable-single-select/shared-searchable-single-select.presentational.ts
@@ -288,11 +288,17 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
));
}
- closeOverlays(): void {
+ closeOverlays(isFocusNext: boolean = true): void {
this._overlayRefs.forEach(overlayRef => this._closeOverlay(overlayRef, true));
this._overlayRefs.clear();
- const elementToFocus = this._tabulationService.getNext(this.openElementToRefocus);
- this._tabulationService.focusNext(elementToFocus);
+ if (isFocusNext) {
+ const elementToFocus = this._tabulationService.getNext(this.openElementToRefocus);
+ this._tabulationService.focusNext(elementToFocus);
+ } else {
+ const elementToFocus = this._tabulationService.getPrev(this.openElementToRefocus);
+ this._tabulationService.focusPrev(elementToFocus);
+ }
+
}
private _observeCloseEventInOverlay(componentRef: ComponentRef<SharedSearchableSingleSelectContentPresentational<TResource>>, overlayRef: OverlayRef): void {
@@ -301,11 +307,6 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
this._closeOverlay(overlayRef);
}),
));
- this.subscribe(componentRef.instance.closeByTabObs.pipe(
- tap(() => {
- this.closeOverlays();
- }),
- ));
}
private _observeClickBackdrop(componentRef: ComponentRef<SharedSearchableSingleSelectContentPresentational<TResource>>, overlayRef: OverlayRef): void {
@@ -314,6 +315,11 @@ export class SharedSearchableSingleSelectPresentational<TStateModel extends Reso
this._closeOverlay(overlayRef);
}),
));
+ this.subscribe(componentRef.instance.closeByTabObs.pipe(
+ tap(() => {
+ this.closeOverlays();
+ }),
+ ));
}
private _closeOverlay(overlayRef: OverlayRef, keepInOverlayRefs?: boolean): void {