[Library | Trunk]: Create search-input component
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60208 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
42e0f4673b
commit
edee649e7c
|
|
@ -0,0 +1,49 @@
|
|||
input, input:focus {
|
||||
background: transparent 0 0 no-repeat padding-box;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #a3a3a3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 980px) {
|
||||
input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-mobile {
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 2px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
button.search, button.search:hover {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button.search:hover {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
button.search .icon-bg {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
|
||||
import {AbstractControl} from '@angular/forms';
|
||||
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
|
||||
|
||||
@Component({
|
||||
selector: '[search-input]',
|
||||
styleUrls: ['search-input.component.css'],
|
||||
template: `
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile" [ngClass]="colorClass">
|
||||
<div *ngIf="control" class="uk-width-expand">
|
||||
<form (ngSubmit)="search()">
|
||||
<input #input type="text" class="uk-width-1-1"
|
||||
[class.uk-animation-slide-right-medium]="showSearch && !control.value"
|
||||
[class.uk-hidden@m]="!showSearch"
|
||||
[class.uk-hidden]="selected"
|
||||
[placeholder]="placeholder"
|
||||
(blur)="closeSearch()"
|
||||
[formControl]="control"
|
||||
[matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
|
||||
<mat-option *ngFor="let option of list | async" [value]="option">
|
||||
{{option}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</form>
|
||||
<div *ngIf="selected" class="uk-flex uk-flex-left selected">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>{{selected}}</span>
|
||||
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
||||
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
|
||||
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"
|
||||
(mousedown)="$event.preventDefault()" (click)="toggle()">
|
||||
<span [ngClass]="colorClass" class="icon-bg">
|
||||
<icon class="uk-position-center" name="search"></icon>
|
||||
</span>
|
||||
<span class="uk-text-uppercase space">search</span>
|
||||
</button>
|
||||
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
|
||||
(mousedown)="$event.preventDefault()" (click)="search()">
|
||||
<span [ngClass]="colorClass" class="icon-bg">
|
||||
<icon class="uk-position-center" name="search"></icon>
|
||||
</span>
|
||||
<span class="uk-text-uppercase space">search</span>
|
||||
</button>
|
||||
</div>`
|
||||
})
|
||||
export class SearchInputComponent {
|
||||
@Input()
|
||||
showSearch: boolean = true;
|
||||
@Input()
|
||||
control: AbstractControl;
|
||||
@Input()
|
||||
placeholder: string;
|
||||
@Input()
|
||||
loading: boolean = false;
|
||||
@Input()
|
||||
selected: any;
|
||||
@Input()
|
||||
list: any = null;
|
||||
@Input()
|
||||
colorClass: string = 'portal-color';
|
||||
@ViewChild('input') input: ElementRef;
|
||||
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
|
||||
@Output()
|
||||
searchEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@Output()
|
||||
resetEmitter: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
toggle() {
|
||||
if(!this.selected) {
|
||||
this.showSearch = !this.showSearch;
|
||||
if (this.showSearch) {
|
||||
setTimeout(() => { // this will make the execution after the above boolean has changed
|
||||
this.input.nativeElement.focus();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
closeSearch() {
|
||||
this.showSearch = false;
|
||||
}
|
||||
|
||||
public search(emit = true) {
|
||||
this.trigger.closePanel();
|
||||
this.searchEmitter.emit(emit);
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.showSearch = true;
|
||||
setTimeout(() => {
|
||||
this.input.nativeElement.focus();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {SharedModule} from '../../shared/shared.module';
|
||||
import {SearchInputComponent} from './search-input.component';
|
||||
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
||||
import {IconsModule} from '../../utils/icons/icons.module';
|
||||
import {IconsService} from '../../utils/icons/icons.service';
|
||||
import {search} from '../../utils/icons/icons';
|
||||
|
||||
@NgModule({
|
||||
imports: [SharedModule, MatAutocompleteModule, IconsModule],
|
||||
declarations: [SearchInputComponent],
|
||||
exports: [SearchInputComponent]
|
||||
})
|
||||
export class SearchInputModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([search]);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue