aboutsummaryrefslogtreecommitdiffstats
path: root/src/angular/filterbar
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-05-21 20:19:48 +0000
committerGerrit Code Review <gerrit@onap.org>2018-05-21 20:19:48 +0000
commit05b37297177e8a342668c15e5d6f738b51f7aedd (patch)
treee236c96df52a13f935292db8aa73e84d0c41ad8a /src/angular/filterbar
parent884dfb789593d2a3cc319047ab1f0215778aec9f (diff)
parent1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff)
Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP
Diffstat (limited to 'src/angular/filterbar')
-rw-r--r--src/angular/filterbar/filter-bar.component.html.ts30
-rw-r--r--src/angular/filterbar/filter-bar.component.ts30
-rw-r--r--src/angular/filterbar/filter-bar.module.ts17
3 files changed, 77 insertions, 0 deletions
diff --git a/src/angular/filterbar/filter-bar.component.html.ts b/src/angular/filterbar/filter-bar.component.html.ts
new file mode 100644
index 0000000..a7d55e2
--- /dev/null
+++ b/src/angular/filterbar/filter-bar.component.html.ts
@@ -0,0 +1,30 @@
+export default `
+<div class="search-bar-container">
+ <sdc-input class="search-bar-input"
+ [label]="label"
+ [placeHolder]="placeholder"
+ [debounceTime]="debounceTime"
+ [(value)]="searchQuery"
+ (valueChange)="searchTextChange($event)"></sdc-input>
+ <span class="clear-search-x filter-button" *ngIf="searchQuery" (click)="clearSearchQuery()">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use fill="#000" xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ <span class="magnify-button filter-button" *ngIf="!searchQuery">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+ <use fill="#000" xlink:href="#search-a"/>
+ </g>
+ </svg>
+ </span>
+</div>
+`;
diff --git a/src/angular/filterbar/filter-bar.component.ts b/src/angular/filterbar/filter-bar.component.ts
new file mode 100644
index 0000000..49cc154
--- /dev/null
+++ b/src/angular/filterbar/filter-bar.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import template from "./filter-bar.component.html";
+
+@Component({
+ selector: 'sdc-filter-bar',
+ template: template
+})
+export class FilterBarComponent {
+
+ @HostBinding('class') classes = 'sdc-filter-bar';
+
+ @Input() public placeholder: string;
+ @Input() public label: string;
+ @Input() public debounceTime: number;
+
+ @Input() public searchQuery: string;
+ @Output() public searchQueryChange: EventEmitter<any> = new EventEmitter<any>();
+
+ constructor() {
+ this.debounceTime = 200;
+ }
+
+ private searchTextChange = ($event): void => {
+ this.searchQueryChange.emit($event);
+ }
+
+ private clearSearchQuery = (): void => {
+ this.searchQuery = "";
+ }
+}
diff --git a/src/angular/filterbar/filter-bar.module.ts b/src/angular/filterbar/filter-bar.module.ts
new file mode 100644
index 0000000..c3604ed
--- /dev/null
+++ b/src/angular/filterbar/filter-bar.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { FilterBarComponent } from "./filter-bar.component";
+import { CommonModule } from "@angular/common";
+import { FormElementsModule } from "../form-elements/form-elements.module";
+
+@NgModule({
+ declarations: [
+ FilterBarComponent
+ ],
+ imports: [CommonModule,
+ FormElementsModule],
+ exports: [
+ FilterBarComponent
+ ],
+})
+export class FilterBarModule {
+}