mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
94d908e51a
* [AAE-5392] - Make search text input more configurable & add an event emitter to indicate the states of it * Remove fdescribe * Emit empty search term when the search gets cleared * Emit the empty search term when the search gets collapsed by the Search icon * Same onBlur, emit the empty search term * Add unit tests for emitters resetting the search term * Fix comments, use reset event emitter instead of emitting an empty search term * Update documentation * Revert reset to boolean * Fix flaky unit test
38 lines
1.7 KiB
HTML
38 lines
1.7 KiB
HTML
<div class="adf-search-container" [attr.state]="subscriptAnimationState.value">
|
|
<div [@transitionMessages]="subscriptAnimationState"
|
|
(@transitionMessages.done)="applySearchFocus($event)">
|
|
<button mat-icon-button
|
|
*ngIf="expandable"
|
|
id="adf-search-button"
|
|
class="adf-search-button"
|
|
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
|
|
(click)="toggleSearchBar()"
|
|
(keyup.enter)="toggleSearchBar()">
|
|
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
|
</button>
|
|
<mat-form-field class="adf-input-form-field-divider">
|
|
<input matInput
|
|
#searchInput
|
|
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
|
|
[attr.type]="inputType"
|
|
[autocomplete]="getAutoComplete()"
|
|
id="adf-control-input"
|
|
[(ngModel)]="searchTerm"
|
|
(focus)="activateToolbar()"
|
|
(blur)="onBlur($event)"
|
|
(keyup.escape)="toggleSearchBar()"
|
|
(keyup.arrowdown)="selectFirstResult($event)"
|
|
(ngModelChange)="inputChange($event)"
|
|
[searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
|
|
(keyup.enter)="searchSubmit($event)">
|
|
<button mat-icon-button matSuffix
|
|
data-automation-id="adf-clear-search-button"
|
|
class="adf-clear-search-button"
|
|
*ngIf="canShowClearSearch()"
|
|
(mousedown)="resetSearch()">
|
|
<mat-icon>clear</mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|