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

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

@@ -27,7 +27,7 @@ Displays a input text that supports autocompletion
### Properties ### Properties
| Name | Type | Default value | Description | | Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- | |--------------------| ---- | ------------- |--------------------------------------------------------------------------------------------|
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. | | autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
| collapseOnBlur | `boolean` | true | Toggles whether to collapse the search on blur. | | collapseOnBlur | `boolean` | true | Toggles whether to collapse the search on blur. |
| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. | | collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
@@ -39,6 +39,7 @@ Displays a input text that supports autocompletion
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). | | 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. | | liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
| placeholder | `string` | "" | Placeholder text to show in the input field | | 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. | | searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
| searchTerm | `string` | "" | Search term preselected | | searchTerm | `string` | "" | Search term preselected |
| showClearButton | `boolean` | false | Toggles whether to show a clear button that closes the search | | showClearButton | `boolean` | false | Toggles whether to show a clear button that closes the search |

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> <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button> </button>
<mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel"> <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
<mat-label *ngIf='label'>{{label}}</mat-label>
<input matInput <input matInput
#searchInput #searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate" [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() @Input()
placeholder: string = ''; placeholder: string = '';
/** Label text to show over the input field */
@Input()
label: string = '';
/** Hint label */ /** Hint label */
@Input() @Input()
hintLabel = ''; hintLabel = '';

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

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