mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
802d196840
* Changed ng version before material migration * migration for material' * Fixed most of unit tests failing * [affected:*][ci:force] Fixing rebase * [affected:*][ci:force] attempt to fix mat-selectors importing * [affected:*][ci:force] Fixing the styles - check * AAE-21392 Fix dropdown form widget style (#9605) * ACS-7768 Applied new styles for inputs * ACS-7768 Align icon * ACS-7768 Input colors based on input state * ACS-7768 Corrected spaces * ACS-7768 Styles for selectboxes * ACS-7768 Fixed label jumping on hovering * ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label * ACS-7768 Style inputs in search filters * ACS-7768 Set appearance for inputs globally to outline * ACS-7768 Style inputs for share dialog and login page * ACS-7768 Style inputs in properties panel * ACS-7768 Fixed white background when disabled field * ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container * Revert "[affected:*][ci:force] Fixing the styles - check" This reverts commit80d971f7ab. * Revert "[affected:*][ci:force] attempt to fix mat-selectors importing" This reverts commit821d9e1864. * Revert "[affected:*][ci:force] Fixing rebase" This reverts commit378c6c2000. * Revert "Fixed most of unit tests failing" This reverts commit44948e0a28. * ACS-7768 Reverted unwanted changes --------- Co-authored-by: Vito Albano <vito.albano@hyland.com> Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
48 lines
2.9 KiB
HTML
48 lines
2.9 KiB
HTML
<mat-form-field class="adf-chip-list">
|
|
<mat-label>{{ placeholder | translate }}</mat-label>
|
|
<mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
|
|
<mat-chip-row
|
|
class="adf-option-chips adf-autocomplete-added-option-chips"
|
|
*ngFor="let option of selectedOptions"
|
|
(removed)="remove(option)">
|
|
<span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
|
|
[matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
|
|
{{ option.value }}
|
|
</span>
|
|
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
|
|
[matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
|
|
[matTooltipShowDelay]="tooltipShowDelay"
|
|
[attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
|
|
<mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
|
|
</button>
|
|
</mat-chip-row>
|
|
<input
|
|
aria-controls="adf-search-chip-autocomplete"
|
|
#optionInput
|
|
[formControl]="formCtrl"
|
|
[matAutocomplete]="auto"
|
|
[matChipInputFor]="chipList"
|
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
[attr.aria-label]="placeholder | translate"
|
|
class="adf-search-properties-file-input"
|
|
(matChipInputTokenEnd)="add($event)"
|
|
(blur)="activeAnyOption = false"
|
|
data-automation-id="adf-search-chip-autocomplete-input">
|
|
</mat-chip-grid>
|
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" id="adf-search-chip-autocomplete"
|
|
(optionActivated)="activeAnyOption = true" (closed)="activeAnyOption = false">
|
|
<ng-container *ngIf="optionInput.value.length > 0">
|
|
<mat-option
|
|
[disabled]="option | adfIsIncluded: selectedOptions : compareOption"
|
|
*ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
|
|
[matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
|
|
[attr.data-automation-id]="'option-' + (option.value)"
|
|
[matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
|
|
class="adf-search-chip-autocomplete-added-option"
|
|
[ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
|
|
{{ option.fullPath || option.value }}
|
|
</mat-option>
|
|
</ng-container>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|