@resolveio/client-lib-core 1.0.5 → 1.0.7

package/fesm2020/resolveio-client-lib-core.mjs

@@ -2377,6 +2377,7 @@ class DialogSelectDateTimeContent {
         this._activeModal = _activeModal;
         this._fb = _fb;
         this.title = '';
+        this.showTime = true;
     }
     ngOnInit() {
         if (!this.date) {
@@ -2387,12 +2388,45 @@ class DialogSelectDateTimeContent {
             date: [{ year: this.date.getFullYear(), month: this.date.getMonth() + 1, day: this.date.getDate() }, [Validators.required]]
         });
     }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            let foundElement = this.recursiveFindFirstElement(this.allElements.nativeElement);
+            if (foundElement) {
+                foundElement.focus();
+            }
+            else {
+                this.close.nativeElement.focus();
+                this.close.nativeElement.blur();
+            }
+        }, 100);
+    }
+    recursiveFindFirstElement(element) {
+        let foundElement = null;
+        let htmlCol = element.children;
+        for (let i = 0; i < Object.keys(htmlCol).length; i++) {
+            let key = Object.keys(htmlCol)[i];
+            let htmlElem = htmlCol[key];
+            if (htmlElem.children && htmlElem.children.length) {
+                foundElement = this.recursiveFindFirstElement(htmlElem);
+            }
+            else if (htmlElem.tagName === 'BUTTON' && htmlElem.classList.contains('close')) {
+                return null;
+            }
+            else if ((htmlElem.tagName === 'BUTTON' || htmlElem.tagName === 'INPUT' || htmlElem.tagName === 'SELECT' || htmlElem.tagName === 'TEXTAREA') && !htmlElem.hidden && !htmlElem.disabled) {
+                return htmlElem;
+            }
+            if (foundElement) {
+                break;
+            }
+        }
+        return foundElement;
+    }
     submitForm() {
         this._activeModal.close(new Date(this.form.value.date.year, parseInt(this.form.value.date.month) - 1, this.form.value.date.day, this.form.value.time.hour, this.form.value.time.minute, this.form.value.time.second, 0));
     }
 }
 DialogSelectDateTimeContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectDateTimeContent, deps: [{ token: i1$4.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DialogSelectDateTimeContent, selector: "ng-component", inputs: { title: "title", date: "date" }, ngImport: i0, template: `
+DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DialogSelectDateTimeContent, selector: "ng-component", inputs: { title: "title", date: "date", showTime: "showTime" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
 	  	<style>
 		  	table {
 				width: 100%;
@@ -2408,41 +2442,42 @@ DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
 				text-align: center;
 			}
 		</style>
-		<form [formGroup]="form" novalidate (ngSubmit)="submitForm()">
-			<div class="modal-header">
-				<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
-				<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				
-				<table>
-					<tr>
-						<td>
-							<div class="input-group">
-								<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker #d="ngbDatepicker">
-								<div class="input-group-append" (click)="d.toggle()">
-									<div class="input-group-text">
-										<i class="fa fa-calendar" aria-hidden="true"></i>
+		<div #allElements>
+			<form [formGroup]="form" novalidate (ngSubmit)="submitForm()">
+				<div class="modal-header">
+					<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
+					<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()" #close>
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<table>
+						<tr>
+							<td style="border: none;">
+								<div class="input-group">
+									<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker [firstDayOfWeek]="7" #d="ngbDatepicker">
+									<div class="input-group-append" (click)="d.toggle()">
+										<div class="input-group-text">
+											<i class="fa fa-calendar" aria-hidden="true"></i>
+										</div>
 									</div>
 								</div>
-							</div>
-						</td>
-						<td>
-							<div class="offset-3">
-								<ngb-timepicker formControlName="time" meridian="ON"></ngb-timepicker>
-							</div>
-						</td>
-					</tr>
-				</table>
-			</div>
-			<div class="modal-footer">
-				<form-button [form]="form"></form-button>
-				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
-			</div>
-		</form>
-	`, isInline: true, styles: ["\n\t\t  \ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\ttable-layout: fixed;\n\t\t\t}\n\n\t\t\ttr {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\ttd {\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t"], components: [{ type: i1$4.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+							</td>
+							<td *ngIf="showTime" style="border: none;">
+								<div class="offset-3">
+									<ngb-timepicker formControlName="time" meridian="ON"></ngb-timepicker>
+								</div>
+							</td>
+						</tr>
+					</table>
+				</div>
+				<div class="modal-footer">
+					<form-button [form]="form"></form-button>
+					<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
+				</div>
+			</form>
+		</div>
+	`, isInline: true, styles: ["\n\t\t  \ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\ttable-layout: fixed;\n\t\t\t}\n\n\t\t\ttr {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\ttd {\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t"], components: [{ type: i1$4.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectDateTimeContent, decorators: [{
             type: Component,
             args: [{
@@ -2462,46 +2497,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 				text-align: center;
 			}
 		</style>
-		<form [formGroup]="form" novalidate (ngSubmit)="submitForm()">
-			<div class="modal-header">
-				<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
-				<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				
-				<table>
-					<tr>
-						<td>
-							<div class="input-group">
-								<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker #d="ngbDatepicker">
-								<div class="input-group-append" (click)="d.toggle()">
-									<div class="input-group-text">
-										<i class="fa fa-calendar" aria-hidden="true"></i>
+		<div #allElements>
+			<form [formGroup]="form" novalidate (ngSubmit)="submitForm()">
+				<div class="modal-header">
+					<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
+					<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()" #close>
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<table>
+						<tr>
+							<td style="border: none;">
+								<div class="input-group">
+									<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker [firstDayOfWeek]="7" #d="ngbDatepicker">
+									<div class="input-group-append" (click)="d.toggle()">
+										<div class="input-group-text">
+											<i class="fa fa-calendar" aria-hidden="true"></i>
+										</div>
 									</div>
 								</div>
-							</div>
-						</td>
-						<td>
-							<div class="offset-3">
-								<ngb-timepicker formControlName="time" meridian="ON"></ngb-timepicker>
-							</div>
-						</td>
-					</tr>
-				</table>
-			</div>
-			<div class="modal-footer">
-				<form-button [form]="form"></form-button>
-				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
-			</div>
-		</form>
+							</td>
+							<td *ngIf="showTime" style="border: none;">
+								<div class="offset-3">
+									<ngb-timepicker formControlName="time" meridian="ON"></ngb-timepicker>
+								</div>
+							</td>
+						</tr>
+					</table>
+				</div>
+				<div class="modal-footer">
+					<form-button [form]="form"></form-button>
+					<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
+				</div>
+			</form>
+		</div>
 	`
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.NgbActiveModal }, { type: i2.FormBuilder }]; }, propDecorators: { title: [{
                 type: Input
             }], date: [{
                 type: Input
+            }], showTime: [{
+                type: Input
+            }], close: [{
+                type: ViewChild,
+                args: ['close', { static: false }]
+            }], allElements: [{
+                type: ViewChild,
+                args: ['allElements', { static: false }]
             }] } });
 
 // tslint:disable-next-line:component-class-suffix
@@ -4126,10 +4170,11 @@ class DialogService {
         modalRef.componentInstance.html = html;
         return modalRef.result;
     }
-    selectDateTime(date) {
+    selectDateTime(date, showTime = true) {
         const modalRef = this.openDialog(DialogSelectDateTimeContent);
-        modalRef.componentInstance.title = 'Select Date and Time';
+        modalRef.componentInstance.title = 'Select Date' + (showTime ? ' and Time' : '');
         modalRef.componentInstance.date = date;
+        modalRef.componentInstance.showTime = showTime;
         return modalRef.result;
     }
     selectDataLabel(data, showArraySubData = true) {