MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix a bug with options position in modals

This commit is contained in:
Konstantinos Triantafyllou 2022-04-04 13:53:26 +03:00
parent 225285c960
commit f19408b1a8
1 changed files with 68 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sharedComponents/input/input.component.ts
View File

@ -41,6 +41,7 @@ declare var UIkit;
@Component({ @Component({
selector: '[dashboard-input], [input]', selector: '[dashboard-input], [input]',
template: ` template: `
<div [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened" <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint" [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || formAsArray?.length > 0) && !focused" [class.active]="(formAsControl?.value || formAsArray?.length > 0) && !focused"
@ -104,7 +105,7 @@ declare var UIkit;
</div> </div>
</div> </div>
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: click; offset: 15;"> uk-dropdown="pos: bottom-justify; mode: click; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions" [class.uk-active]="formControl.value === option.value" <li *ngFor="let option of filteredOptions" [class.uk-active]="formControl.value === option.value"
[attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null"> [attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
@ -112,6 +113,7 @@ declare var UIkit;
</li> </li>
</ul> </ul>
</div> </div>
</div>
<span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger"> <span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger">
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span> <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span> <span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
@ -133,6 +135,7 @@ declare var UIkit;
` `
}) })
export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
private static INPUT_COUNTER: number = 0;
/** Deprecated options*/ /** Deprecated options*/
/** @deprecated */ /** @deprecated */
@Input('label') label: string; @Input('label') label: string;
@ -185,6 +188,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** LogoUrl information */ /** LogoUrl information */
public secure: boolean = true; public secure: boolean = true;
/** Internal basic information */ /** Internal basic information */
public id: string;
public placeholderInfo: Placeholder = {label: '', static: true}; public placeholderInfo: Placeholder = {label: '', static: true};
public required: boolean = false; public required: boolean = false;
public focused: boolean = false; public focused: boolean = false;
@ -221,6 +225,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
ngOnInit() { ngOnInit() {
InputComponent.INPUT_COUNTER++;
this.id = 'input-' + InputComponent.INPUT_COUNTER;
if (!this.formControl) { if (!this.formControl) {
if (Array.isArray(this.value)) { if (Array.isArray(this.value)) {
this.formControl = new FormArray([]); this.formControl = new FormArray([]);
@ -350,7 +356,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
return (this.showOptionsOnEmpty) ? options : []; return (this.showOptionsOnEmpty) ? options : [];
} }
const filterValue = value.toString().toLowerCase(); const filterValue = value.toString().toLowerCase();
console.log(options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1));
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
} }