@sarasanalytics-com/design-system 0.0.182 → 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,4 +1,4 @@
|
|
|
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';
|
|
@@ -27,6 +27,7 @@ export class DatepickerComponent extends FieldType {
|
|
|
27
27
|
this.minDate = null;
|
|
28
28
|
this.maxDate = null;
|
|
29
29
|
this.hintText = 'MM/DD/YYYY';
|
|
30
|
+
this.dateChange = new EventEmitter();
|
|
30
31
|
this._singleDateControl = new FormControl(null);
|
|
31
32
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
32
33
|
}
|
|
@@ -36,10 +37,11 @@ export class DatepickerComponent extends FieldType {
|
|
|
36
37
|
onDateChange(event) {
|
|
37
38
|
if (this.dateType === 'single') {
|
|
38
39
|
this.singleFormControl.setValue(event.value);
|
|
40
|
+
this.dateChange.emit(event.value);
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
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]=\"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 }] }); }
|
|
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 }] }); }
|
|
43
45
|
}
|
|
44
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
45
47
|
type: Component,
|
|
@@ -56,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
56
58
|
MatNativeDateModule,
|
|
57
59
|
MatIconModule,
|
|
58
60
|
MatButtonModule
|
|
59
|
-
], 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]=\"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"] }]
|
|
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"] }]
|
|
60
62
|
}], propDecorators: { range: [{
|
|
61
63
|
type: Input
|
|
62
64
|
}], dateType: [{
|
|
@@ -67,5 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
67
69
|
type: Input
|
|
68
70
|
}], hintText: [{
|
|
69
71
|
type: Input
|
|
72
|
+
}], dateChange: [{
|
|
73
|
+
type: Output
|
|
70
74
|
}] } });
|
|
71
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ25FLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFGLE9BQU8sRUFBRSxTQUFTLEVBQW1CLE1BQU0sa0JBQWtCLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDdkYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7OztBQXVCM0QsTUFBTSxPQUFPLG1CQUFvQixTQUFRLFNBQTBCO0lBckJuRTs7UUFzQlcsVUFBSyxHQUFjLElBQUksU0FBUyxDQUFDO1lBQ3hDLEtBQUssRUFBRSxJQUFJLFdBQVcsQ0FBYyxJQUFJLENBQUM7WUFDekMsR0FBRyxFQUFFLElBQUksV0FBVyxDQUFjLElBQUksQ0FBQztTQUN4QyxDQUFDLENBQUM7UUFDTSxhQUFRLEdBQXVCLE9BQU8sQ0FBQztRQUN2QyxZQUFPLEdBQWdCLElBQUksQ0FBQztRQUM1QixZQUFPLEdBQWdCLElBQUksQ0FBQztRQUM1QixhQUFRLEdBQVcsWUFBWSxDQUFDO1FBQy9CLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3ZDLHVCQUFrQixHQUFHLElBQUksV0FBVyxDQUFjLElBQUksQ0FBQyxDQUFDO1FBRXZELDRCQUF1QixHQUFHLHVCQUF1QixDQUFDO0tBWTVEO0lBVkMsSUFBSSxpQkFBaUI7UUFDbkIsT0FBTyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxrQkFBa0IsQ0FBQztJQUNyRCxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQy9CLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzdDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQzs4R0F2QlUsbUJBQW1CO2tHQUFuQixtQkFBbUIsbU5BbEJuQixFQUFFLGlEQ2pCZixvc0NBc0JBLHcrQkRISSxrQkFBa0IsbWdCQUNsQixjQUFjLDBXQUNkLG1CQUFtQixvbENBR25CLG1CQUFtQixzaENBQ25CLFdBQVcsOEJBRVgsWUFBWSw4QkFDWixtQkFBbUIsOEJBQ25CLGFBQWEsOEJBQ2IsZUFBZTs7MkZBS04sbUJBQW1CO2tCQXJCL0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxhQUNMLEVBQUUsV0FDSjt3QkFDUCxrQkFBa0I7d0JBQ2xCLGNBQWM7d0JBQ2QsbUJBQW1CO3dCQUNuQixLQUFLO3dCQUNMLElBQUk7d0JBQ0osbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLHVCQUF1Qjt3QkFDdkIsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLGFBQWE7d0JBQ2IsZUFBZTtxQkFDaEI7OEJBS1EsS0FBSztzQkFBYixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXREYXRlcGlja2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGF0ZXBpY2tlcic7XHJcbmltcG9ydCB7IE1hdElucHV0TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xyXG5pbXBvcnQgeyBNYXRGb3JtRmllbGRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcclxuaW1wb3J0IHsgTWF0TmF0aXZlRGF0ZU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSwgRm9ybUNvbnRyb2wsIEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgRmllbGRUeXBlLCBGaWVsZFR5cGVDb25maWcgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcclxuaW1wb3J0IHsgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuLi9jYWxlbmRhci1oZWFkZXIvY2FsZW5kYXItaGVhZGVyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2EtZGF0ZXBpY2tlcicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBwcm92aWRlcnM6IFtdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcclxuICAgIE1hdElucHV0TW9kdWxlLFxyXG4gICAgTWF0RGF0ZXBpY2tlck1vZHVsZSxcclxuICAgIE5nRm9yLFxyXG4gICAgTmdJZixcclxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXHJcbiAgICBGb3Jtc01vZHVsZSxcclxuICAgIENhbGVuZGFySGVhZGVyQ29tcG9uZW50LFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgTWF0TmF0aXZlRGF0ZU1vZHVsZSxcclxuICAgIE1hdEljb25Nb2R1bGUsXHJcbiAgICBNYXRCdXR0b25Nb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRlcGlja2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZGF0ZXBpY2tlci5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0ZXBpY2tlckNvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcclxuICBASW5wdXQoKSByYW5nZTogRm9ybUdyb3VwID0gbmV3IEZvcm1Hcm91cCh7XHJcbiAgICBzdGFydDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKSxcclxuICAgIGVuZDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKVxyXG4gIH0pO1xyXG4gIEBJbnB1dCgpIGRhdGVUeXBlOiAncmFuZ2UnIHwgJ3NpbmdsZScgPSAncmFuZ2UnO1xyXG4gIEBJbnB1dCgpIG1pbkRhdGU6IERhdGUgfCBudWxsID0gbnVsbDtcclxuICBASW5wdXQoKSBtYXhEYXRlOiBEYXRlIHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KCkgaGludFRleHQ6IHN0cmluZyA9ICdNTS9ERC9ZWVlZJztcclxuICBAT3V0cHV0KCkgZGF0ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gIHByaXZhdGUgX3NpbmdsZURhdGVDb250cm9sID0gbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKTtcclxuXHJcbiAgcmVhZG9ubHkgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgPSBDYWxlbmRhckhlYWRlckNvbXBvbmVudDtcclxuXHJcbiAgZ2V0IHNpbmdsZUZvcm1Db250cm9sKCk6IEZvcm1Db250cm9sIHtcclxuICAgIHJldHVybiB0aGlzLmZvcm1Db250cm9sID8/IHRoaXMuX3NpbmdsZURhdGVDb250cm9sO1xyXG4gIH1cclxuXHJcbiAgb25EYXRlQ2hhbmdlKGV2ZW50OiBhbnkpIHtcclxuICAgIGlmICh0aGlzLmRhdGVUeXBlID09PSAnc2luZ2xlJykge1xyXG4gICAgICB0aGlzLnNpbmdsZUZvcm1Db250cm9sLnNldFZhbHVlKGV2ZW50LnZhbHVlKTtcclxuICAgICAgdGhpcy5kYXRlQ2hhbmdlLmVtaXQoZXZlbnQudmFsdWUpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCJAaWYgKGRhdGVUeXBlID09PSAncmFuZ2UnKSB7XHJcbiAgPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZGF0ZS1waWNrZXJcIj5cclxuICAgIDxtYXQtbGFiZWw+Q2hvb3NlIGEgZGF0ZTwvbWF0LWxhYmVsPlxyXG4gICAgPG1hdC1kYXRlLXJhbmdlLWlucHV0IFtyYW5nZVBpY2tlcl09XCJwaWNrZXJcIiBbZm9ybUdyb3VwXT1cInJhbmdlXCI+XHJcbiAgICAgIDxpbnB1dCBmb3JtQ29udHJvbE5hbWU9XCJzdGFydFwiIG1hdFN0YXJ0RGF0ZSBwbGFjZWhvbGRlcj1cIlN0YXJ0IGRhdGVcIj5cclxuICAgICAgPGlucHV0IGZvcm1Db250cm9sTmFtZT1cImVuZFwiIG1hdEVuZERhdGUgcGxhY2Vob2xkZXI9XCJFbmQgZGF0ZVwiPlxyXG4gICAgPC9tYXQtZGF0ZS1yYW5nZS1pbnB1dD5cclxuICAgIDxtYXQtaGludD57eyBoaW50VGV4dCB9fTwvbWF0LWhpbnQ+XHJcbiAgICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdEljb25TdWZmaXggW2Zvcl09XCJwaWNrZXJcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cclxuICAgIDxtYXQtZGF0ZS1yYW5nZS1waWNrZXIgW2NhbGVuZGFySGVhZGVyQ29tcG9uZW50XT1cIkNhbGVuZGFySGVhZGVyQ29tcG9uZW50XCIgI3BpY2tlcj5cclxuICAgIDwvbWF0LWRhdGUtcmFuZ2UtcGlja2VyPlxyXG4gIDwvbWF0LWZvcm0tZmllbGQ+XHJcbn0gQGVsc2UgaWYoZGF0ZVR5cGUgPT09ICdzaW5nbGUnKSB7XHJcbiAgPG1hdC1mb3JtLWZpZWxkIGFwcGVhcmFuY2U9XCJvdXRsaW5lXCIgY2xhc3M9XCJkYXRlLXBpY2tlci1maWVsZFwiPlxyXG4gICAgPG1hdC1sYWJlbD5TZWxlY3QgRGF0ZTwvbWF0LWxhYmVsPlxyXG4gICAgPGlucHV0IG1hdElucHV0IFttYXREYXRlcGlja2VyXT1cInBpY2tlclNpbmdsZVwiIFtmb3JtQ29udHJvbF09XCJzaW5nbGVGb3JtQ29udHJvbFwiXHJcbiAgICAgICAgICAgW21pbl09XCJtaW5EYXRlXCIgW21heF09XCJtYXhEYXRlXCIgKGRhdGVDaGFuZ2UpPVwib25EYXRlQ2hhbmdlKCRldmVudClcIj5cclxuICAgIDxtYXQtZGF0ZXBpY2tlci10b2dnbGUgbWF0SWNvblN1ZmZpeCBbZm9yXT1cInBpY2tlclNpbmdsZVwiPjwvbWF0LWRhdGVwaWNrZXItdG9nZ2xlPlxyXG4gICAgPG1hdC1kYXRlcGlja2VyICNwaWNrZXJTaW5nbGU+PC9tYXQtZGF0ZXBpY2tlcj5cclxuICAgIDxtYXQtaGludD57eyBoaW50VGV4dCB9fTwvbWF0LWhpbnQ+XHJcbiAgPC9tYXQtZm9ybS1maWVsZD5cclxufVxyXG4iXX0=
|
|
@@ -1885,6 +1885,7 @@ class DatepickerComponent extends FieldType {
|
|
|
1885
1885
|
this.minDate = null;
|
|
1886
1886
|
this.maxDate = null;
|
|
1887
1887
|
this.hintText = 'MM/DD/YYYY';
|
|
1888
|
+
this.dateChange = new EventEmitter();
|
|
1888
1889
|
this._singleDateControl = new FormControl(null);
|
|
1889
1890
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1890
1891
|
}
|
|
@@ -1894,10 +1895,11 @@ class DatepickerComponent extends FieldType {
|
|
|
1894
1895
|
onDateChange(event) {
|
|
1895
1896
|
if (this.dateType === 'single') {
|
|
1896
1897
|
this.singleFormControl.setValue(event.value);
|
|
1898
|
+
this.dateChange.emit(event.value);
|
|
1897
1899
|
}
|
|
1898
1900
|
}
|
|
1899
1901
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1900
|
-
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]=\"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 }] }); }
|
|
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 }] }); }
|
|
1901
1903
|
}
|
|
1902
1904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1903
1905
|
type: Component,
|
|
@@ -1914,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1914
1916
|
MatNativeDateModule,
|
|
1915
1917
|
MatIconModule,
|
|
1916
1918
|
MatButtonModule
|
|
1917
|
-
], 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]=\"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"] }]
|
|
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"] }]
|
|
1918
1920
|
}], propDecorators: { range: [{
|
|
1919
1921
|
type: Input
|
|
1920
1922
|
}], dateType: [{
|
|
@@ -1925,6 +1927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1925
1927
|
type: Input
|
|
1926
1928
|
}], hintText: [{
|
|
1927
1929
|
type: Input
|
|
1930
|
+
}], dateChange: [{
|
|
1931
|
+
type: Output
|
|
1928
1932
|
}] } });
|
|
1929
1933
|
|
|
1930
1934
|
function phoneNumberValidator(dependent) {
|