From 4a03065dbd771bdecba84392c050ade612c8bed3 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 6 Mar 2023 13:18:16 +0200 Subject: [PATCH 1/2] Input component: Delete depracated inputs, add visibleChips limit, add separators for chips and style note with italic --- sharedComponents/input/input.component.ts | 56 ++++++++----------- .../subscriber-invite.component.ts | 5 +- 2 files changed, 27 insertions(+), 34 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index d20bf6ff..eafbbdaa 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -97,7 +97,7 @@ declare var UIkit;
-
@@ -112,9 +112,9 @@ declare var UIkit; [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
-
- + {{(formAsArray.length - 1)}} more + + {{(formAsArray.length - visibleChips)}} more
@@ -133,6 +133,7 @@ declare var UIkit;
+
@@ -155,10 +156,10 @@ declare var UIkit; {{formControl.errors.error}} Please provide a valid URL (e.g. https://example.com) - + - + Note: Prefer urls like "https://example.com/my-secure-image.png" @@ -166,34 +167,13 @@ declare var UIkit; Browsers may not load non secure content. - + - + ` }) export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { private static INPUT_COUNTER: number = 0; - /** Deprecated options*/ - /** @deprecated */ - @Input('label') label: string; - /** @deprecated */ - @Input() extraLeft: boolean = true; - /** @deprecated */ - @Input() gridSmall: boolean = false; - /** @deprecated */ - @Input() hideControl: boolean = false; - /** @deprecated */ - @Input() flex: 'middle' | 'top' | 'bottom' = 'middle'; - /** @deprecated */ - @Input() iconLeft: boolean = false; - /** @deprecated */ - @Input() removable: boolean = true; - /** @deprecated */ - @Input() smallChip: boolean = false; - /** @deprecated */ - @Input() panelWidth: number = 300; - /** @deprecated */ - @Input() panelClass: string = null; /** Basic information */ @Input('formInput') formControl: AbstractControl; @Input('type') type: InputType = 'text'; @@ -226,6 +206,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang /** Chip options */ @Input() addExtraChips: boolean = false; @Input() showOptionsOnEmpty: boolean = true; + @Input() visibleChips: number = 1; + @Input() separators: string[] = []; @Output() focusEmitter: EventEmitter = new EventEmitter(); /** LogoUrl information */ public secure: boolean = true; @@ -324,6 +306,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } + @HostListener('keydown', ['$event']) + onKeyDown(event: KeyboardEvent) { + if (this.separators.includes(event.key)) { + event.preventDefault(); + this.add(event, true); + } + } + click(event: ClickEvent) { this.focus(!event.clicked, event); } @@ -484,15 +474,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return options; } - add(event) { - if (this.addExtraChips && this.searchControl.value && this.searchControl.valid) { + 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(); + this.searchControl.setValue(''); + } else if(!this.focused) { + this.searchControl.setValue(''); } - this.searchControl.setValue(''); } getLabel(value: any): string { @@ -534,7 +526,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.searchInput.nativeElement.blur(); } if (this.searchControl) { - this.add(event); + this.add(event, this.addExtraChips); } } this.focusEmitter.emit(this.focused); diff --git a/sharedComponents/subscriber-invite/subscriber-invite.component.ts b/sharedComponents/subscriber-invite/subscriber-invite.component.ts index 0115119b..515fc97b 100644 --- a/sharedComponents/subscriber-invite/subscriber-invite.component.ts +++ b/sharedComponents/subscriber-invite/subscriber-invite.component.ts @@ -18,8 +18,9 @@ import {NotificationHandler} from "../../utils/notification-handler";
+ placeholder="Recipients" hint="Add a recipient" [visibleChips]="3" + [addExtraChips]="true" [validators]="validators" [separators]="[',']"> +
Separate emails with commas
From 1d2a0effa840836cbb26334eabd9e1ea3752b455 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 7 Mar 2023 12:26:26 +0200 Subject: [PATCH 2/2] Input: Show static placeholder in case of autocomplete. Update validators of form control when input validators is changed --- sharedComponents/input/input.component.ts | 27 ++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index eafbbdaa..3d95f75f 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -85,7 +85,10 @@ declare var UIkit; -
{{getLabel(formAsControl.value)}}
+ +
{{placeholderInfo?.static?placeholderInfo.label:getLabel(formAsControl.value)}}
+
{{getLabel(formAsControl.value)}}
+
{{noValueSelected}}
{{getLabel(formControl.value)}}
@@ -124,11 +127,11 @@ declare var UIkit; - - @@ -328,8 +331,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.formAsArray.push(new UntypedFormControl(value, this.validators)); }); } else { - this.formControl = new UntypedFormControl(this.value); - this.formControl.setValidators(this.validators); + this.formControl = new UntypedFormControl(this.value, this.validators); } if (this.disabled) { this.formControl.disable(); @@ -346,6 +348,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang if (changes.value) { this.formControl.setValue(this.value); } + if(changes.validators) { + this.updateValidators(); + } if (changes.formControl || changes.validators || changes.options) { this.reset(); } @@ -446,6 +451,18 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang }); } + updateValidators() { + if(this.formAsArray) { + this.formAsArray.controls.forEach(control => { + control.setValidators(this.validators); + control.updateValueAndValidity(); + }) + } else { + this.formControl.setValidators(this.validators); + this.formControl.updateValueAndValidity(); + } + } + remove(index: number, event) { if (this.focused) { this.formAsArray.removeAt(index);