0 || getLabel(formAsControl?.value) || yearRangeActive)"
+ [class.active]="!focused && (formAsControl?.value || selectable || type === 'date' || formAsArray?.length > 0 || getLabel(formAsControl?.value) || yearRangeActive)"
[class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
-
0 && opened" class="options uk-dropdown" #optionBox
- uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
+ uk-dropdown="pos: bottom-justify; mode: none; boundary-align: true;" [attr.boundary]="'#' + id">
@@ -279,7 +289,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** Year Range Configuration */
@Input() yearRange: YearRange;
public activeIndex: 0 | 1 | null = null;
-
+ /** Date Configuration*/
+ @Input() selectADate: string = 'Select a date';
+ public selectedDate: Date;
@Input() visibleRows: number = -1;
@Input() extendEnter: () => void = null;
@Output() focusEmitter: EventEmitter
= new EventEmitter();
@@ -299,9 +311,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
private subscriptions: any[] = [];
@ViewChild('inputBox') inputBox: ElementRef;
@ViewChild('optionBox') optionBox: ElementRef;
+ @ViewChild('calendarBox') calendarBox: ElementRef;
@ViewChild('mobileDropdown') mobileDropdown: MobileDropdownComponent;
@ViewChild('searchInput') searchInput: ElementRef;
@ViewChildren('chip') chips: QueryList;
+ @ViewChild('datepicker') datepicker: MatDatepicker;
@Input()
set placeholder(placeholder: string | Placeholder) {
@@ -570,6 +584,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
let validator = this.formControl.validator({} as AbstractControl);
this.required = (validator && validator.required);
}
+ if(this.type === 'date') {
+ this.selectedDate = this.formAsControl.getRawValue()?new Date(this.formAsControl.getRawValue()):null;
+ }
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
if (this.formControl.enabled) {
if(this.type !== 'year-range') {
@@ -589,6 +606,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.open(true);
}
}
+ if (this.type === 'date') {
+ this.selectedDate = value?new Date(value):null;
+ }
}
if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
this.valueChange.emit(this.formControl.value);
@@ -737,7 +757,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.searchInput.nativeElement.focus();
this.activeElement.next(this.chips.last);
}
- if (this.selectArrow) {
+ if (this.selectArrow || this.datepicker) {
this.open(!this.opened);
} else if (this.type !== 'autocomplete' || this.showOptionsOnEmpty || !this.formControl.value) {
this.open(true);
@@ -776,6 +796,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
UIkit.dropdown(this.optionBox.nativeElement).hide();
this.focused = false;
}
+ } else if(this.calendarBox) {
+ if (this.opened) {
+ UIkit.dropdown(this.calendarBox.nativeElement).show();
+ } else {
+ UIkit.dropdown(this.calendarBox.nativeElement).hide();
+ this.focused = false;
+ }
} else if(this.mobileDropdown) {
if(this.opened) {
this.mobileDropdown.open();
@@ -813,4 +840,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
}
}
+
+ dateChanged(event: Date) {
+ this.focus(false);
+ this.formAsControl.setValue(event.getTime());
+ }
}
diff --git a/sharedComponents/input/input.module.ts b/sharedComponents/input/input.module.ts
index d332485a..fea6cc2c 100644
--- a/sharedComponents/input/input.module.ts
+++ b/sharedComponents/input/input.module.ts
@@ -1,10 +1,13 @@
import {NgModule} from '@angular/core';
import {InputComponent} from "./input.component";
-import {SharedModule} from "../../../openaireLibrary/shared/shared.module";
+import {SharedModule} from "../../shared/shared.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
import {ClickModule} from "../../utils/click/click.module";
import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.module";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatNativeDateModule} from "@angular/material/core";
+import {MatInputModule} from "@angular/material/input";
@NgModule({
imports: [
@@ -12,7 +15,10 @@ import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.
IconsModule,
SafeHtmlPipeModule,
ClickModule,
- MobileDropdownModule
+ MobileDropdownModule,
+ MatDatepickerModule,
+ MatNativeDateModule,
+ MatInputModule
],
exports: [
InputComponent