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

Remove text transform from chips in input

This commit is contained in:
Konstantinos Triantafyllou 2023-04-20 14:53:40 +03:00
parent f49149c99e
commit 65415d0146
1 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,15 @@ import {properties} from "../../../../environments/environment";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive"; import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
import {element} from "protractor"; import {element} from "protractor";
export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips'; export type InputType =
'text'
| 'URL'
| 'logoURL'
| 'autocomplete'
| 'autocomplete_soft'
| 'textarea'
| 'select'
| 'chips';
export interface Option { export interface Option {
icon?: string, icon?: string,
@ -112,7 +120,7 @@ declare var UIkit;
<div *ngFor="let chip of formAsArray.controls; let i=index" #chip <div *ngFor="let chip of formAsArray.controls; let i=index" #chip
[class.uk-hidden]="!focused && i > visibleChips - 1" [class.uk-hidden]="!focused && i > visibleChips - 1"
class="chip"> class="chip">
<div class="uk-label uk-label-small uk-flex uk-flex-middle" <div class="uk-label uk-label-small uk-text-transform-none uk-flex uk-flex-middle"
[attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null"> [attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null">
<span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span> <span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
<icon *ngIf="focused" (click)="remove(i, $event)" <icon *ngIf="focused" (click)="remove(i, $event)"
@ -548,19 +556,37 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
add(event, addChips = false) { add(event, addChips = false) {
if (addChips && this.searchControl.value && this.searchControl.valid) { if (addChips && this.searchControl.value) {
if (event && event.stopPropagation) { this.splitSearchControl();
event.stopPropagation();
}
this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
this.formAsArray.markAsDirty();
this.searchControl.setValue('');
this.activeElement.next(this.chips.last);
} else if (!this.focused) { } else if (!this.focused) {
this.searchControl.setValue(''); this.searchControl.setValue('');
} }
} }
splitSearchControl() {
let values = [this.searchControl.value];
this.separators.forEach(separator => {
values = ([] as string[]).concat(...values.map(value => {
if (Array.isArray(value)) {
return ([] as string[]).concat(...value.map(element => element.split(separator)));
} else {
return value.split(separator);
}
}));
});
values.forEach(value => {
let control = new UntypedFormControl(value.trim(), this.validators);
if (control.valid) {
this.formAsArray.push(control);
this.formAsArray.markAsDirty();
}
});
if (this.formAsArray.dirty) {
this.activeElement.next(this.chips.last);
this.searchControl.setValue('');
}
}
getLabel(value: any): string { getLabel(value: any): string {
let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value)); let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
return (option) ? option.label : (value); return (option) ? option.label : (value);