MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

no message

This commit is contained in:
Diamantis Tziotzios 2024-04-19 10:13:02 +03:00
parent 6fe74c2218
commit eb146b21c7
2 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -1,4 +1,7 @@
<div class="row multiple-auto-complete" ng-form> <div class="row multiple-auto-complete" ng-form>
<div class="col">
<div class="row">
<div class="col-12">
<mat-chip-grid #chipList ngDefaultControl class="chip-list"> <mat-chip-grid #chipList ngDefaultControl class="chip-list">
<ng-container *ngIf="value as values;"> <ng-container *ngIf="value as values;">
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row"> <mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row">
@ -14,8 +17,10 @@
</mat-chip-row> </mat-chip-row>
</ng-container> </ng-container>
</mat-chip-grid> </mat-chip-grid>
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [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)"> </div>
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon> <div class="col-12">
<input matInput #autocompleteInput [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [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)">
</div>
<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">
@ -73,4 +78,9 @@
</ng-template> </ng-template>
</span> </span>
</mat-autocomplete> </mat-autocomplete>
</div>
</div>
<div class="col-auto d-flex">
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
</div>
</div> </div>

8
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -33,10 +33,10 @@
} }
.chip-list { // .chip-list {
max-width: calc(100% - 30px); // max-width: calc(100% - 30px);
padding-left: 0.8em; // padding-left: 0.8em;
} // }
.title-subtitle-fn { .title-subtitle-fn {
height: auto; height: auto;