diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index bcff2739..19c5040c 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -23,15 +23,15 @@ import {properties} from "../../../../environments/environment"; import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive"; export type InputType = - 'text' - | 'URL' - | 'logoURL' - | 'autocomplete' - | 'autocomplete_soft' - | 'textarea' - | 'select' - | 'chips' - | 'year-range'; + 'text' + | 'URL' + | 'logoURL' + | 'autocomplete' + | 'autocomplete_soft' + | 'textarea' + | 'select' + | 'chips' + | 'year-range'; export interface Option { icon?: string, @@ -70,144 +70,144 @@ declare var UIkit; @Component({ selector: '[dashboard-input], [input]', template: ` -
-
-
-
- -
-
- - - - +
+
+
+
+ +
+
+ + + + - - - -
{{placeholderInfo.label}}
-
{{getLabel(formControl.value)}}
- - -
{{noValueSelected}}
-
{{getLabel(formControl.value)}}
- - - - - -
{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}
-
{{getLabel(formAsControl.value)}}
- - -
{{noValueSelected}}
-
{{getLabel(formControl.value)}}
- - - - - - -
-
-
- {{getLabel(chip.value)}} - + + + +
{{placeholderInfo.label}}
+
{{getLabel(formControl.value)}}
+ + +
{{noValueSelected}}
+
{{getLabel(formControl.value)}}
+ + + + + +
{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}
+
{{getLabel(formAsControl.value)}}
+ + +
{{noValueSelected}}
+
{{getLabel(formControl.value)}}
+ + + + + + +
+
+
+ {{getLabel(chip.value)}} + +
+
+
+ +
+
+ + {{(formAsArray.length - visibleChips)}} more +
+
+ + +
+ +
+
-
+
+ +
+ +
+ + + + + + + +
+ + +
+
+
-
-
- -
-
- + {{(formAsArray.length - visibleChips)}} more -
- - -
- -
-
-
-
- -
- -
- - - - - - - -
- -
-
- -
-
-
-
-
    -
  • - +
    + + [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}} + +
    • +
+
-
- + {{errors?.error}} Please provide a valid URL (e.g. https://example.com) - + - + Note: Prefer urls like "https://example.com/my-secure-image.png" @@ -215,9 +215,9 @@ declare var UIkit; Browsers may not load non secure content. - - - + + + ` }) export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { @@ -261,7 +261,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang /** Year Range Configuration */ @Input() yearRange: YearRange; public activeIndex: 0 | 1 | null = null; - + @Input() visibleRows: number = -1; @Input() extendEnter: () => void = null; @Output() focusEmitter: EventEmitter = new EventEmitter(); @@ -282,7 +282,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @ViewChild('optionBox') optionBox: ElementRef; @ViewChild('searchInput') searchInput: ElementRef; @ViewChildren('chip') chips: QueryList; - + @Input() set placeholder(placeholder: string | Placeholder) { if(this.type === 'year-range') { @@ -297,7 +297,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.placeholderInfo = placeholder; } } - + @Input() set options(options: (Option | string | number) []) { this.optionsArray = options.map(option => { @@ -322,13 +322,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.selectable = true; } } - + constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") { console.warn("'dashboard-input' selector is deprecated; use 'input' instead."); } } - + @HostListener('window:keydown.arrowUp', ['$event']) arrowUp(event: KeyboardEvent) { if (this.opened) { @@ -339,7 +339,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + @HostListener('window:keydown.arrowDown', ['$event']) arrowDown(event: KeyboardEvent) { if (this.opened) { @@ -350,7 +350,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + @HostListener('window:keydown.arrowLeft', ['$event']) arrowLeft(event: KeyboardEvent) { if (this.type === 'chips' && this.focused) { @@ -364,7 +364,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + @HostListener('window:keydown.arrowRight', ['$event']) arrowRight(event: KeyboardEvent) { if (this.type === 'chips' && this.focused) { @@ -378,7 +378,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + @HostListener('window:keydown.enter', ['$event']) enter(event: KeyboardEvent) { if (this.opened && this.optionBox) { @@ -395,7 +395,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.extendEnter(); } } - + @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { if (this.separators.includes(event.key) || this.separators.includes(event.key.toLowerCase())) { @@ -403,11 +403,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.add(event, true); } } - + click(event: ClickEvent) { this.focus(!event.clicked); } - + ngOnInit() { InputComponent.INPUT_COUNTER++; this.id = 'input-' + InputComponent.INPUT_COUNTER; @@ -430,11 +430,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } }) } - + ngAfterViewInit() { this.reset(); } - + ngOnChanges(changes: SimpleChanges) { if (this.formControl) { if (changes.value) { @@ -455,11 +455,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + ngOnDestroy(): void { this.unsubscribe(); } - + getFormByName(name: string): UntypedFormControl { if (this.formControl instanceof UntypedFormGroup) { return this.formControl.get(name); @@ -467,7 +467,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return null; } } - + get formAsGroup(): UntypedFormGroup { if (this.formControl instanceof UntypedFormGroup) { return this.formControl; @@ -475,7 +475,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return null; } } - + get formAsControl(): UntypedFormControl { if (this.formControl instanceof UntypedFormControl) { return this.formControl; @@ -483,7 +483,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return null; } } - + get formAsArray(): UntypedFormArray { if (this.formControl instanceof UntypedFormArray) { return this.formControl; @@ -491,26 +491,26 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return null; } } - + get yearRangeActive(): boolean { if(this.yearRange) { return this.formAsGroup && (this.getFormByName(this.yearRange.from.control)?.value || this.getFormByName(this.yearRange.to.control)?.value); } return false; } - + get errors(): any { if(this.formAsGroup) { return (this.formAsGroup.errors - ?this.formAsGroup.errors:(this.getFormByName(this.yearRange.from.control).errors - ?this.getFormByName(this.yearRange.from.control).errors:this.getFormByName(this.yearRange.to.control).errors)); + ?this.formAsGroup.errors:(this.getFormByName(this.yearRange.from.control).errors + ?this.getFormByName(this.yearRange.from.control).errors:this.getFormByName(this.yearRange.to.control).errors)); } else if(this.formAsControl) { return this.formAsControl.errors; } else { return this.searchControl.errors; } } - + reset() { this.secure = true; this.unsubscribe(); @@ -601,7 +601,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang }); } } - + unsubscribe() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { @@ -609,7 +609,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } }); } - + updateValidators() { if (this.formAsArray) { this.formAsArray.controls.forEach(control => { @@ -621,7 +621,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.formControl.updateValueAndValidity(); } } - + remove(index: number, event) { if (this.focused) { this.formAsArray.removeAt(index); @@ -631,7 +631,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang event.stopPropagation(); } } - + private filter(value: string): Option[] { let options = this.optionsArray.filter(option => !option.hidden); if (this.type === "chips") { @@ -649,7 +649,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } return options; } - + add(event, addChips = false) { if (addChips && this.searchControl.value) { this.splitSearchControl(); @@ -657,7 +657,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.searchControl.setValue(''); } } - + splitSearchControl() { let values = [this.searchControl.value]; this.separators.forEach(separator => { @@ -681,17 +681,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.searchControl.setValue(''); } } - + getLabel(value: any): string { let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value)); return (option) ? option.label : (value); } - + getTooltip(value: any): string { let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value)); return (option) ? (option.tooltip ? option.tooltip : option.label) : (value); } - + focus(value: boolean, event = null) { if(!this.activeIndex) { this.activeIndex = 0; @@ -699,41 +699,43 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang if (this.focused) { this.formControl.markAsTouched(); } - this.focused = value; - this.cdr.detectChanges(); - if (this.focused) { - if (this.input?.length > 0) { - this.input.get(this.activeIndex).nativeElement.focus(); - } else if (this.textArea) { - this.textArea.nativeElement.focus(); - } else if (this.searchInput) { - this.searchInput.nativeElement.focus(); - this.activeElement.next(this.chips.last); - } - if (this.selectArrow) { - this.open(!this.opened); - } else if (this.type !== 'autocomplete' || this.showOptionsOnEmpty || !this.formControl.value) { - this.open(true); - } - } else { - this.activeIndex = null; - this.open(false); - if (this.input) { - this.input.forEach(input => { - input.nativeElement.blur(); - }) - } else if (this.textArea) { - this.textArea.nativeElement.blur(); - } else if (this.searchInput) { - this.searchInput.nativeElement.blur(); - } - if (this.searchControl) { - this.add(event, this.addExtraChips); + if(this.formControl.enabled) { + this.focused = value; + this.cdr.detectChanges(); + if (this.focused) { + if (this.input?.length > 0) { + this.input.get(this.activeIndex).nativeElement.focus(); + } else if (this.textArea) { + this.textArea.nativeElement.focus(); + } else if (this.searchInput) { + this.searchInput.nativeElement.focus(); + this.activeElement.next(this.chips.last); + } + if (this.selectArrow) { + this.open(!this.opened); + } else if (this.type !== 'autocomplete' || this.showOptionsOnEmpty || !this.formControl.value) { + this.open(true); + } + } else { + this.activeIndex = null; + this.open(false); + if (this.input) { + this.input.forEach(input => { + input.nativeElement.blur(); + }) + } else if (this.textArea) { + this.textArea.nativeElement.blur(); + } else if (this.searchInput) { + this.searchInput.nativeElement.blur(); + } + if (this.searchControl) { + this.add(event, this.addExtraChips); + } } + this.focusEmitter.emit(this.focused); } - this.focusEmitter.emit(this.focused); } - + open(value: boolean) { this.opened = value && this.formControl.enabled; this.cdr.detectChanges(); @@ -750,19 +752,19 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } } - + resetSearch(event: any) { event.stopPropagation(); this.searchControl.setValue(''); this.focus(true, event); } - + resetValue(event: any) { event.stopPropagation(); this.formControl.setValue(''); this.focus(true, event); } - + selectOption(option: Option, event) { if (this.formControl.enabled) { if (this.formAsControl) {