autocomplete style changes
This commit is contained in:
parent
d1d0cbd931
commit
bcf4a3f6a2
|
@ -13,7 +13,7 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</mat-chip-list>
|
</mat-chip-list>
|
||||||
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
|
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
|
||||||
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>keyboard_arrow_down</mat-icon>
|
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
|
||||||
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
||||||
<span *ngIf="_groupedItems">
|
<span *ngIf="_groupedItems">
|
||||||
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
|
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
|
||||||
|
|
|
@ -6,11 +6,14 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.align-arrow-right {
|
.align-arrow-right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
align-self: center;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="row auto-complete">
|
<div class="row auto-complete">
|
||||||
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
|
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
|
||||||
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>keyboard_arrow_down</mat-icon>
|
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
|
||||||
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
||||||
<span *ngIf="_groupedItems">
|
<span *ngIf="_groupedItems">
|
||||||
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
|
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
|
||||||
|
|
|
@ -29,6 +29,9 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
align-self: center;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue