inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add expandable input field to search control

Browse Source
This commit is contained in:
Will Abson
2016-06-01 18:55:34 +01:00
parent a683cb12e6
commit 8f1659fca1
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ng2-components/ng2-alfresco-search/README.md
View File

@@ -144,6 +144,7 @@ bootstrap(SearchDemo, [
**searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br /> **searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br />
**inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br /> **inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br />
**expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.
### Search results ### Search results

6
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
View File

@@ -1,9 +1,9 @@
<form (submit)="onSearch($event)"> <form (submit)="onSearch($event)">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <div [class]="getTextFieldClassName()">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm"> <label *ngIf="expandable" class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
<i class="material-icons">search</i> <i class="material-icons">search</i>
</label> </label>
<div class="mdl-textfield__expandable-holder"> <div [class]="getTextFieldHolderClassName()">
<input class="mdl-textfield__input" [type]="inputType" id="searchTerm" [ngFormControl]="searchControl" [(ngModel)]="searchTerm"> <input class="mdl-textfield__input" [type]="inputType" id="searchTerm" [ngFormControl]="searchControl" [(ngModel)]="searchTerm">
<label class="mdl-textfield__label" for="searchTerm">Search content</label> <label class="mdl-textfield__label" for="searchTerm">Search content</label>
</div> </div>

11
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
View File

@@ -38,6 +38,9 @@ export class AlfrescoSearchControlComponent {
@Input() @Input()
inputType = 'text'; inputType = 'text';
@Input()
expandable: boolean = true;
@Output() @Output()
searchChange = new EventEmitter(); searchChange = new EventEmitter();
@@ -56,6 +59,14 @@ export class AlfrescoSearchControlComponent {
componentHandler.upgradeAllRegistered(); componentHandler.upgradeAllRegistered();
} }
getTextFieldClassName(): string {
return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
}
getTextFieldHolderClassName(): string {
return this.expandable ? ' mdl-textfield__expandable-holder' : '';
}
/** /**
* Method called on form submit, i.e. when the user has hit enter * Method called on form submit, i.e. when the user has hit enter
* *