openaire-library/sharedComponents/advanced-search-input/advanced-search-input.compo...

86 lines
2.6 KiB
TypeScript
Raw Permalink Normal View History

import {
AfterContentInit,
Component,
ContentChildren,
EventEmitter, HostListener,
Input,
OnDestroy,
Output,
QueryList
} from "@angular/core";
import {InputComponent} from "../input/input.component";
import {EntitiesSelectionComponent} from "../../searchPages/searchUtils/entitiesSelection.component";
@Component({
selector: 'advanced-search-input',
template: `
<div *ngIf="inputs.length > 0" class="search-input" [class.dark]="dark" [ngClass]="searchInputClass"
[class.small-vertical]="smallVertical">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + length" uk-grid>
<ng-content></ng-content>
</div>
</div>
<div class="uk-width-auto filters-toggle">
<ng-content select="[filters-toggle]"></ng-content>
</div>
<div class="uk-width-auto" [class.uk-flex-first]="iconPosition === 'left'">
2022-04-06 17:24:14 +02:00
<div class="search-icon" [class.disabled]="disabled" (click)="searchEmitter.emit()">
<icon name="search" [flex]="true" ratio="1.3"></icon>
</div>
</div>
</div>
</div>
`
})
export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
@ContentChildren(InputComponent) inputs: QueryList<InputComponent>;
@ContentChildren(EntitiesSelectionComponent) entities: QueryList<EntitiesSelectionComponent>;
@Input() iconPosition: 'left' | 'right' = 'right';
@Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner';
@Input() dark: boolean;
2022-04-06 17:24:14 +02:00
@Input() smallVertical: boolean = false;
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
@HostListener('window:keydown.enter', ['$event'])
enter(event: KeyboardEvent) {
let input: InputComponent = this.inputs.toArray().find(input => input.focused && input.type !== 'select');
if (input) {
input.focus(false, event);
event.preventDefault();
this.searchEmitter.emit();
}
}
constructor() {
}
ngAfterContentInit() {
this.inputs.forEach(input => {
2022-04-06 17:24:14 +02:00
input.inputClass = 'advanced-search';
input.selectArrow = null;
});
}
ngOnDestroy() {
}
focusNext(input: InputComponent | EntitiesSelectionComponent, event: any = null) {
if(!event || !event.init) {
setTimeout(() => {
if(input instanceof InputComponent) {
input.focus(true);
} else {
input.input.focus(true);
}
}, 100);
}
}
get length() {
return this.inputs.length + this.entities.length;
}
}