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

[ACS-7973] [ACC] header layout (#9782)

Browse Source
This commit is contained in:
dominikiwanekhyland
2024-06-06 17:27:54 +02:00
committed by VitoAlbano
parent 671c750af0
commit 7aae8bcf87
4 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/core/components/search-text-input.component.md
View File

@@ -26,22 +26,23 @@ Displays a input text that supports autocompletion
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
| collapseOnBlur | `boolean` | true | Toggles whether to collapse the search on blur. |
| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
| debounceTime | `number` | 0 | Debounce time in milliseconds. |
| defaultState | `SearchTextStateEnum` | | Default state expanded or Collapsed. |
| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` | | Listener for results-list events (focus, blur and focusout). |
| hintLabel | `string` | "" | Hint label |
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
| placeholder | `string` | "" | Placeholder text to show in the input field |
| searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
| searchTerm | `string` | "" | Search term preselected |
| showClearButton | `boolean` | false | Toggles whether to show a clear button that closes the search |
| Name | Type | Default value | Description |
|--------------------| ---- | ------------- |--------------------------------------------------------------------------------------------|
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
| collapseOnBlur | `boolean` | true | Toggles whether to collapse the search on blur. |
| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
| debounceTime | `number` | 0 | Debounce time in milliseconds. |
| defaultState | `SearchTextStateEnum` | | Default state expanded or Collapsed. |
| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` | | Listener for results-list events (focus, blur and focusout). |
| hintLabel | `string` | "" | Hint label |
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
| placeholder | `string` | "" | Placeholder text to show in the input field |
| label | `string` | "" | Label text to show over the input field |
| searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
| searchTerm | `string` | "" | Search term preselected |
| showClearButton | `boolean` | false | Toggles whether to show a clear button that closes the search |
### Events

1
lib/core/src/lib/search-text/search-text-input.component.html
View File

@@ -11,6 +11,7 @@
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
<mat-label *ngIf='label'>{{label}}</mat-label>
<input matInput
#searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"

5
lib/core/src/lib/search-text/search-text-input.component.ts
View File

@@ -99,6 +99,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
@Input()
placeholder: string = '';
/** Label text to show over the input field */
@Input()
label: string = '';
/** Hint label */
@Input()
hintLabel = '';

1
lib/core/src/lib/styles/_mat-selectors.scss
View File

@@ -1,6 +1,7 @@
$material-icons: '.material-icons';
$mat-icon: '.mat-icon';
$mat-icon-button: '.mat-mdc-icon-button';
$mat-icon-button-hover: '.mdc-icon-button__ripple';
$mat-accent: '.mat-accent';
$mat-focused: '.mat-focused';
$mat-line: '.mat-line';