@sarasanalytics-com/design-system 0.0.181 → 0.0.183
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
1
|
+
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
3
3
|
import { MatInputModule } from '@angular/material/input';
|
|
4
4
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
5
5
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
6
6
|
import { NgFor } from '@angular/common';
|
|
7
7
|
import { NgIf } from '@angular/common';
|
|
8
|
-
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
8
|
+
import { ReactiveFormsModule, FormsModule, FormControl, FormGroup } from '@angular/forms';
|
|
9
9
|
import { FieldType } from '@ngx-formly/core';
|
|
10
10
|
import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
|
|
11
11
|
import { CommonModule } from '@angular/common';
|
|
@@ -19,19 +19,29 @@ import * as i4 from "@angular/forms";
|
|
|
19
19
|
export class DatepickerComponent extends FieldType {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
|
+
this.range = new FormGroup({
|
|
23
|
+
start: new FormControl(null),
|
|
24
|
+
end: new FormControl(null)
|
|
25
|
+
});
|
|
22
26
|
this.dateType = 'range';
|
|
23
27
|
this.minDate = null;
|
|
24
28
|
this.maxDate = null;
|
|
25
29
|
this.hintText = 'MM/DD/YYYY';
|
|
30
|
+
this.dateChange = new EventEmitter();
|
|
31
|
+
this._singleDateControl = new FormControl(null);
|
|
26
32
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
27
33
|
}
|
|
34
|
+
get singleFormControl() {
|
|
35
|
+
return this.formControl ?? this._singleDateControl;
|
|
36
|
+
}
|
|
28
37
|
onDateChange(event) {
|
|
29
38
|
if (this.dateType === 'single') {
|
|
30
|
-
this.
|
|
39
|
+
this.singleFormControl.setValue(event.value);
|
|
40
|
+
this.dateChange.emit(event.value);
|
|
31
41
|
}
|
|
32
42
|
}
|
|
33
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
34
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range", dateType: "dateType", minDate: "minDate", maxDate: "maxDate", hintText: "hintText" }, providers: [], usesInheritance: true, ngImport: i0, template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range", dateType: "dateType", minDate: "minDate", maxDate: "maxDate", hintText: "hintText" }, outputs: { dateChange: "dateChange" }, providers: [], usesInheritance: true, ngImport: i0, template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else if(dateType === 'single') {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"singleFormControl\"\r\n [min]=\"minDate\" [max]=\"maxDate\" (dateChange)=\"onDateChange($event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"pickerSingle\"></mat-datepicker-toggle>\r\n <mat-datepicker #pickerSingle></mat-datepicker>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n </mat-form-field>\r\n}\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }] }); }
|
|
35
45
|
}
|
|
36
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
37
47
|
type: Component,
|
|
@@ -48,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
48
58
|
MatNativeDateModule,
|
|
49
59
|
MatIconModule,
|
|
50
60
|
MatButtonModule
|
|
51
|
-
], template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"
|
|
61
|
+
], template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else if(dateType === 'single') {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"singleFormControl\"\r\n [min]=\"minDate\" [max]=\"maxDate\" (dateChange)=\"onDateChange($event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"pickerSingle\"></mat-datepicker-toggle>\r\n <mat-datepicker #pickerSingle></mat-datepicker>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n </mat-form-field>\r\n}\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
52
62
|
}], propDecorators: { range: [{
|
|
53
63
|
type: Input
|
|
54
64
|
}], dateType: [{
|
|
@@ -59,5 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
59
69
|
type: Input
|
|
60
70
|
}], hintText: [{
|
|
61
71
|
type: Input
|
|
72
|
+
}], dateChange: [{
|
|
73
|
+
type: Output
|
|
62
74
|
}] } });
|
|
63
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ25FLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFGLE9BQU8sRUFBRSxTQUFTLEVBQW1CLE1BQU0sa0JBQWtCLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDdkYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7OztBQXVCM0QsTUFBTSxPQUFPLG1CQUFvQixTQUFRLFNBQTBCO0lBckJuRTs7UUFzQlcsVUFBSyxHQUFjLElBQUksU0FBUyxDQUFDO1lBQ3hDLEtBQUssRUFBRSxJQUFJLFdBQVcsQ0FBYyxJQUFJLENBQUM7WUFDekMsR0FBRyxFQUFFLElBQUksV0FBVyxDQUFjLElBQUksQ0FBQztTQUN4QyxDQUFDLENBQUM7UUFDTSxhQUFRLEdBQXVCLE9BQU8sQ0FBQztRQUN2QyxZQUFPLEdBQWdCLElBQUksQ0FBQztRQUM1QixZQUFPLEdBQWdCLElBQUksQ0FBQztRQUM1QixhQUFRLEdBQVcsWUFBWSxDQUFDO1FBQy9CLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3ZDLHVCQUFrQixHQUFHLElBQUksV0FBVyxDQUFjLElBQUksQ0FBQyxDQUFDO1FBRXZELDRCQUF1QixHQUFHLHVCQUF1QixDQUFDO0tBWTVEO0lBVkMsSUFBSSxpQkFBaUI7UUFDbkIsT0FBTyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxrQkFBa0IsQ0FBQztJQUNyRCxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQy9CLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzdDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQzs4R0F2QlUsbUJBQW1CO2tHQUFuQixtQkFBbUIsbU5BbEJuQixFQUFFLGlEQ2pCZixvc0NBc0JBLHcrQkRISSxrQkFBa0IsbWdCQUNsQixjQUFjLDBXQUNkLG1CQUFtQixvbENBR25CLG1CQUFtQixzaENBQ25CLFdBQVcsOEJBRVgsWUFBWSw4QkFDWixtQkFBbUIsOEJBQ25CLGFBQWEsOEJBQ2IsZUFBZTs7MkZBS04sbUJBQW1CO2tCQXJCL0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxhQUNMLEVBQUUsV0FDSjt3QkFDUCxrQkFBa0I7d0JBQ2xCLGNBQWM7d0JBQ2QsbUJBQW1CO3dCQUNuQixLQUFLO3dCQUNMLElBQUk7d0JBQ0osbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLHVCQUF1Qjt3QkFDdkIsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLGFBQWE7d0JBQ2IsZUFBZTtxQkFDaEI7OEJBS1EsS0FBSztzQkFBYixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXREYXRlcGlja2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGF0ZXBpY2tlcic7XHJcbmltcG9ydCB7IE1hdElucHV0TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xyXG5pbXBvcnQgeyBNYXRGb3JtRmllbGRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcclxuaW1wb3J0IHsgTWF0TmF0aXZlRGF0ZU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSwgRm9ybUNvbnRyb2wsIEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgRmllbGRUeXBlLCBGaWVsZFR5cGVDb25maWcgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcclxuaW1wb3J0IHsgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuLi9jYWxlbmRhci1oZWFkZXIvY2FsZW5kYXItaGVhZGVyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2EtZGF0ZXBpY2tlcicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBwcm92aWRlcnM6IFtdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcclxuICAgIE1hdElucHV0TW9kdWxlLFxyXG4gICAgTWF0RGF0ZXBpY2tlck1vZHVsZSxcclxuICAgIE5nRm9yLFxyXG4gICAgTmdJZixcclxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXHJcbiAgICBGb3Jtc01vZHVsZSxcclxuICAgIENhbGVuZGFySGVhZGVyQ29tcG9uZW50LFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgTWF0TmF0aXZlRGF0ZU1vZHVsZSxcclxuICAgIE1hdEljb25Nb2R1bGUsXHJcbiAgICBNYXRCdXR0b25Nb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRlcGlja2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZGF0ZXBpY2tlci5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0ZXBpY2tlckNvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcclxuICBASW5wdXQoKSByYW5nZTogRm9ybUdyb3VwID0gbmV3IEZvcm1Hcm91cCh7XHJcbiAgICBzdGFydDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKSxcclxuICAgIGVuZDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKVxyXG4gIH0pO1xyXG4gIEBJbnB1dCgpIGRhdGVUeXBlOiAncmFuZ2UnIHwgJ3NpbmdsZScgPSAncmFuZ2UnO1xyXG4gIEBJbnB1dCgpIG1pbkRhdGU6IERhdGUgfCBudWxsID0gbnVsbDtcclxuICBASW5wdXQoKSBtYXhEYXRlOiBEYXRlIHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KCkgaGludFRleHQ6IHN0cmluZyA9ICdNTS9ERC9ZWVlZJztcclxuICBAT3V0cHV0KCkgZGF0ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gIHByaXZhdGUgX3NpbmdsZURhdGVDb250cm9sID0gbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKTtcclxuXHJcbiAgcmVhZG9ubHkgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgPSBDYWxlbmRhckhlYWRlckNvbXBvbmVudDtcclxuXHJcbiAgZ2V0IHNpbmdsZUZvcm1Db250cm9sKCk6IEZvcm1Db250cm9sIHtcclxuICAgIHJldHVybiB0aGlzLmZvcm1Db250cm9sID8/IHRoaXMuX3NpbmdsZURhdGVDb250cm9sO1xyXG4gIH1cclxuXHJcbiAgb25EYXRlQ2hhbmdlKGV2ZW50OiBhbnkpIHtcclxuICAgIGlmICh0aGlzLmRhdGVUeXBlID09PSAnc2luZ2xlJykge1xyXG4gICAgICB0aGlzLnNpbmdsZUZvcm1Db250cm9sLnNldFZhbHVlKGV2ZW50LnZhbHVlKTtcclxuICAgICAgdGhpcy5kYXRlQ2hhbmdlLmVtaXQoZXZlbnQudmFsdWUpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCJAaWYgKGRhdGVUeXBlID09PSAncmFuZ2UnKSB7XHJcbiAgPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZGF0ZS1waWNrZXJcIj5cclxuICAgIDxtYXQtbGFiZWw+Q2hvb3NlIGEgZGF0ZTwvbWF0LWxhYmVsPlxyXG4gICAgPG1hdC1kYXRlLXJhbmdlLWlucHV0IFtyYW5nZVBpY2tlcl09XCJwaWNrZXJcIiBbZm9ybUdyb3VwXT1cInJhbmdlXCI+XHJcbiAgICAgIDxpbnB1dCBmb3JtQ29udHJvbE5hbWU9XCJzdGFydFwiIG1hdFN0YXJ0RGF0ZSBwbGFjZWhvbGRlcj1cIlN0YXJ0IGRhdGVcIj5cclxuICAgICAgPGlucHV0IGZvcm1Db250cm9sTmFtZT1cImVuZFwiIG1hdEVuZERhdGUgcGxhY2Vob2xkZXI9XCJFbmQgZGF0ZVwiPlxyXG4gICAgPC9tYXQtZGF0ZS1yYW5nZS1pbnB1dD5cclxuICAgIDxtYXQtaGludD57eyBoaW50VGV4dCB9fTwvbWF0LWhpbnQ+XHJcbiAgICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdEljb25TdWZmaXggW2Zvcl09XCJwaWNrZXJcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cclxuICAgIDxtYXQtZGF0ZS1yYW5nZS1waWNrZXIgW2NhbGVuZGFySGVhZGVyQ29tcG9uZW50XT1cIkNhbGVuZGFySGVhZGVyQ29tcG9uZW50XCIgI3BpY2tlcj5cclxuICAgIDwvbWF0LWRhdGUtcmFuZ2UtcGlja2VyPlxyXG4gIDwvbWF0LWZvcm0tZmllbGQ+XHJcbn0gQGVsc2UgaWYoZGF0ZVR5cGUgPT09ICdzaW5nbGUnKSB7XHJcbiAgPG1hdC1mb3JtLWZpZWxkIGFwcGVhcmFuY2U9XCJvdXRsaW5lXCIgY2xhc3M9XCJkYXRlLXBpY2tlci1maWVsZFwiPlxyXG4gICAgPG1hdC1sYWJlbD5TZWxlY3QgRGF0ZTwvbWF0LWxhYmVsPlxyXG4gICAgPGlucHV0IG1hdElucHV0IFttYXREYXRlcGlja2VyXT1cInBpY2tlclNpbmdsZVwiIFtmb3JtQ29udHJvbF09XCJzaW5nbGVGb3JtQ29udHJvbFwiXHJcbiAgICAgICAgICAgW21pbl09XCJtaW5EYXRlXCIgW21heF09XCJtYXhEYXRlXCIgKGRhdGVDaGFuZ2UpPVwib25EYXRlQ2hhbmdlKCRldmVudClcIj5cclxuICAgIDxtYXQtZGF0ZXBpY2tlci10b2dnbGUgbWF0SWNvblN1ZmZpeCBbZm9yXT1cInBpY2tlclNpbmdsZVwiPjwvbWF0LWRhdGVwaWNrZXItdG9nZ2xlPlxyXG4gICAgPG1hdC1kYXRlcGlja2VyICNwaWNrZXJTaW5nbGU+PC9tYXQtZGF0ZXBpY2tlcj5cclxuICAgIDxtYXQtaGludD57eyBoaW50VGV4dCB9fTwvbWF0LWhpbnQ+XHJcbiAgPC9tYXQtZm9ybS1maWVsZD5cclxufVxyXG4iXX0=
|
|
@@ -7,7 +7,7 @@ import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
|
7
7
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
8
8
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
|
-
import { FormsModule, ReactiveFormsModule,
|
|
10
|
+
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
|
|
11
11
|
import * as i2 from '@angular/material/checkbox';
|
|
12
12
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
13
13
|
import * as i5 from '@angular/material/expansion';
|
|
@@ -1877,19 +1877,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1877
1877
|
class DatepickerComponent extends FieldType {
|
|
1878
1878
|
constructor() {
|
|
1879
1879
|
super(...arguments);
|
|
1880
|
+
this.range = new FormGroup({
|
|
1881
|
+
start: new FormControl(null),
|
|
1882
|
+
end: new FormControl(null)
|
|
1883
|
+
});
|
|
1880
1884
|
this.dateType = 'range';
|
|
1881
1885
|
this.minDate = null;
|
|
1882
1886
|
this.maxDate = null;
|
|
1883
1887
|
this.hintText = 'MM/DD/YYYY';
|
|
1888
|
+
this.dateChange = new EventEmitter();
|
|
1889
|
+
this._singleDateControl = new FormControl(null);
|
|
1884
1890
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1885
1891
|
}
|
|
1892
|
+
get singleFormControl() {
|
|
1893
|
+
return this.formControl ?? this._singleDateControl;
|
|
1894
|
+
}
|
|
1886
1895
|
onDateChange(event) {
|
|
1887
1896
|
if (this.dateType === 'single') {
|
|
1888
|
-
this.
|
|
1897
|
+
this.singleFormControl.setValue(event.value);
|
|
1898
|
+
this.dateChange.emit(event.value);
|
|
1889
1899
|
}
|
|
1890
1900
|
}
|
|
1891
1901
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range", dateType: "dateType", minDate: "minDate", maxDate: "maxDate", hintText: "hintText" }, providers: [], usesInheritance: true, ngImport: i0, template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"
|
|
1902
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range", dateType: "dateType", minDate: "minDate", maxDate: "maxDate", hintText: "hintText" }, outputs: { dateChange: "dateChange" }, providers: [], usesInheritance: true, ngImport: i0, template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else if(dateType === 'single') {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"singleFormControl\"\r\n [min]=\"minDate\" [max]=\"maxDate\" (dateChange)=\"onDateChange($event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"pickerSingle\"></mat-datepicker-toggle>\r\n <mat-datepicker #pickerSingle></mat-datepicker>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n </mat-form-field>\r\n}\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }] }); }
|
|
1893
1903
|
}
|
|
1894
1904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1895
1905
|
type: Component,
|
|
@@ -1906,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1906
1916
|
MatNativeDateModule,
|
|
1907
1917
|
MatIconModule,
|
|
1908
1918
|
MatButtonModule
|
|
1909
|
-
], template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"
|
|
1919
|
+
], template: "@if (dateType === 'range') {\r\n <mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n </mat-form-field>\r\n} @else if(dateType === 'single') {\r\n <mat-form-field appearance=\"outline\" class=\"date-picker-field\">\r\n <mat-label>Select Date</mat-label>\r\n <input matInput [matDatepicker]=\"pickerSingle\" [formControl]=\"singleFormControl\"\r\n [min]=\"minDate\" [max]=\"maxDate\" (dateChange)=\"onDateChange($event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"pickerSingle\"></mat-datepicker-toggle>\r\n <mat-datepicker #pickerSingle></mat-datepicker>\r\n <mat-hint>{{ hintText }}</mat-hint>\r\n </mat-form-field>\r\n}\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
1910
1920
|
}], propDecorators: { range: [{
|
|
1911
1921
|
type: Input
|
|
1912
1922
|
}], dateType: [{
|
|
@@ -1917,6 +1927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1917
1927
|
type: Input
|
|
1918
1928
|
}], hintText: [{
|
|
1919
1929
|
type: Input
|
|
1930
|
+
}], dateChange: [{
|
|
1931
|
+
type: Output
|
|
1920
1932
|
}] } });
|
|
1921
1933
|
|
|
1922
1934
|
function phoneNumberValidator(dependent) {
|