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

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

@ -23,14 +23,22 @@ import {properties} from "../../../../environments/environment";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
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 {
icon?: string,
iconClass?: string,
value: any,
label: string,
tooltip?: string,
tooltip?: string,
disabled?: boolean,
hidden?: boolean
}
@ -112,7 +120,7 @@ declare var UIkit;
<div *ngFor="let chip of formAsArray.controls; let i=index" #chip
[class.uk-hidden]="!focused && i > visibleChips - 1"
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">
<span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
<icon *ngIf="focused" (click)="remove(i, $event)"
@ -274,10 +282,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
return option;
}
});
if(!this.tooltip) {
if (!this.tooltip) {
this.tooltip = this.optionsArray.length > 0;
}
if(this.type === "select") {
if (this.type === "select") {
if (this.optionsArray.length > this.optionsBreakpoint) {
this.type = 'autocomplete';
this.showOptionsOnEmpty = true;
@ -317,11 +325,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowLeft', ['$event'])
arrowLeft(event: KeyboardEvent) {
if(this.focused) {
if (this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
if (this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index > 0) {
if (index > 0) {
this.activeElement.next(this.chips.get(index - 1));
return;
}
@ -331,11 +339,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowRight', ['$event'])
arrowRight(event: KeyboardEvent) {
if(this.focused) {
if (this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
if (this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index < this.chips.length - 1) {
if (index < this.chips.length - 1) {
this.activeElement.next(this.chips.get(index + 1));
return;
}
@ -355,7 +363,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.focus(false, event);
}
if(this.extendEnter) {
if (this.extendEnter) {
this.extendEnter();
}
}
@ -389,7 +397,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
}
this.activeElement.subscribe(element => {
if(element) {
if (element) {
element.nativeElement.scrollIntoView({behavior: 'smooth'});
}
})
@ -404,7 +412,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (changes.value) {
this.formControl.setValue(this.value);
}
if(changes.validators) {
if (changes.validators) {
this.updateValidators();
}
if (changes.formControl || changes.validators || changes.options) {
@ -508,7 +516,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
updateValidators() {
if(this.formAsArray) {
if (this.formAsArray) {
this.formAsArray.controls.forEach(control => {
control.setValidators(this.validators);
control.updateValueAndValidity();
@ -548,15 +556,33 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
add(event, addChips = false) {
if (addChips && this.searchControl.value && this.searchControl.valid) {
if (event && event.stopPropagation) {
event.stopPropagation();
}
this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
this.formAsArray.markAsDirty();
if (addChips && this.searchControl.value) {
this.splitSearchControl();
} else if (!this.focused) {
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);
} else if(!this.focused) {
this.searchControl.setValue('');
}
}
@ -565,8 +591,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
return (option) ? option.label : (value);
}
getTooltip(value: any): string {
getTooltip(value: any): string {
let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
return (option) ? (option.tooltip ? option.tooltip : option.label) : (value);
}