@sarasanalytics-com/design-system 0.0.181 → 0.0.182
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.
|
@@ -5,7 +5,7 @@ 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,27 @@ 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._singleDateControl = new FormControl(null);
|
|
26
31
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
27
32
|
}
|
|
33
|
+
get singleFormControl() {
|
|
34
|
+
return this.formControl ?? this._singleDateControl;
|
|
35
|
+
}
|
|
28
36
|
onDateChange(event) {
|
|
29
37
|
if (this.dateType === 'single') {
|
|
30
|
-
this.
|
|
38
|
+
this.singleFormControl.setValue(event.value);
|
|
31
39
|
}
|
|
32
40
|
}
|
|
33
41
|
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]=\"
|
|
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 }] }); }
|
|
35
43
|
}
|
|
36
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
37
45
|
type: Component,
|
|
@@ -48,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
48
56
|
MatNativeDateModule,
|
|
49
57
|
MatIconModule,
|
|
50
58
|
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]=\"
|
|
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"] }]
|
|
52
60
|
}], propDecorators: { range: [{
|
|
53
61
|
type: Input
|
|
54
62
|
}], dateType: [{
|
|
@@ -60,4 +68,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
60
68
|
}], hintText: [{
|
|
61
69
|
type: Input
|
|
62
70
|
}] } });
|
|
63
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0QsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMxRixPQUFPLEVBQUUsU0FBUyxFQUFtQixNQUFNLGtCQUFrQixDQUFDO0FBQzlELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7QUF1QjNELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSxTQUEwQjtJQXJCbkU7O1FBc0JXLFVBQUssR0FBYyxJQUFJLFNBQVMsQ0FBQztZQUN4QyxLQUFLLEVBQUUsSUFBSSxXQUFXLENBQWMsSUFBSSxDQUFDO1lBQ3pDLEdBQUcsRUFBRSxJQUFJLFdBQVcsQ0FBYyxJQUFJLENBQUM7U0FDeEMsQ0FBQyxDQUFDO1FBQ00sYUFBUSxHQUF1QixPQUFPLENBQUM7UUFDdkMsWUFBTyxHQUFnQixJQUFJLENBQUM7UUFDNUIsWUFBTyxHQUFnQixJQUFJLENBQUM7UUFDNUIsYUFBUSxHQUFXLFlBQVksQ0FBQztRQUVqQyx1QkFBa0IsR0FBRyxJQUFJLFdBQVcsQ0FBYyxJQUFJLENBQUMsQ0FBQztRQUV2RCw0QkFBdUIsR0FBRyx1QkFBdUIsQ0FBQztLQVc1RDtJQVRDLElBQUksaUJBQWlCO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFdBQVcsSUFBSSxJQUFJLENBQUMsa0JBQWtCLENBQUM7SUFDckQsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxRQUFRLEVBQUUsQ0FBQztZQUMvQixJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQyxDQUFDO0lBQ0gsQ0FBQzs4R0F0QlUsbUJBQW1CO2tHQUFuQixtQkFBbUIsNEtBbEJuQixFQUFFLGlEQ2pCZiwwcUNBc0JBLHcrQkRISSxrQkFBa0IsbWdCQUNsQixjQUFjLDBXQUNkLG1CQUFtQixvbENBR25CLG1CQUFtQixzaENBQ25CLFdBQVcsOEJBRVgsWUFBWSw4QkFDWixtQkFBbUIsOEJBQ25CLGFBQWEsOEJBQ2IsZUFBZTs7MkZBS04sbUJBQW1CO2tCQXJCL0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxhQUNMLEVBQUUsV0FDSjt3QkFDUCxrQkFBa0I7d0JBQ2xCLGNBQWM7d0JBQ2QsbUJBQW1CO3dCQUNuQixLQUFLO3dCQUNMLElBQUk7d0JBQ0osbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLHVCQUF1Qjt3QkFDdkIsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLGFBQWE7d0JBQ2IsZUFBZTtxQkFDaEI7OEJBS1EsS0FBSztzQkFBYixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXREYXRlcGlja2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGF0ZXBpY2tlcic7XHJcbmltcG9ydCB7IE1hdElucHV0TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xyXG5pbXBvcnQgeyBNYXRGb3JtRmllbGRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcclxuaW1wb3J0IHsgTWF0TmF0aXZlRGF0ZU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSwgRm9ybUNvbnRyb2wsIEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgRmllbGRUeXBlLCBGaWVsZFR5cGVDb25maWcgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcclxuaW1wb3J0IHsgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuLi9jYWxlbmRhci1oZWFkZXIvY2FsZW5kYXItaGVhZGVyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2EtZGF0ZXBpY2tlcicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBwcm92aWRlcnM6IFtdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcclxuICAgIE1hdElucHV0TW9kdWxlLFxyXG4gICAgTWF0RGF0ZXBpY2tlck1vZHVsZSxcclxuICAgIE5nRm9yLFxyXG4gICAgTmdJZixcclxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXHJcbiAgICBGb3Jtc01vZHVsZSxcclxuICAgIENhbGVuZGFySGVhZGVyQ29tcG9uZW50LFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgTWF0TmF0aXZlRGF0ZU1vZHVsZSxcclxuICAgIE1hdEljb25Nb2R1bGUsXHJcbiAgICBNYXRCdXR0b25Nb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRlcGlja2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZGF0ZXBpY2tlci5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0ZXBpY2tlckNvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcclxuICBASW5wdXQoKSByYW5nZTogRm9ybUdyb3VwID0gbmV3IEZvcm1Hcm91cCh7XHJcbiAgICBzdGFydDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKSxcclxuICAgIGVuZDogbmV3IEZvcm1Db250cm9sPERhdGUgfCBudWxsPihudWxsKVxyXG4gIH0pO1xyXG4gIEBJbnB1dCgpIGRhdGVUeXBlOiAncmFuZ2UnIHwgJ3NpbmdsZScgPSAncmFuZ2UnO1xyXG4gIEBJbnB1dCgpIG1pbkRhdGU6IERhdGUgfCBudWxsID0gbnVsbDtcclxuICBASW5wdXQoKSBtYXhEYXRlOiBEYXRlIHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KCkgaGludFRleHQ6IHN0cmluZyA9ICdNTS9ERC9ZWVlZJztcclxuXHJcbiAgcHJpdmF0ZSBfc2luZ2xlRGF0ZUNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2w8RGF0ZSB8IG51bGw+KG51bGwpO1xyXG5cclxuICByZWFkb25seSBDYWxlbmRhckhlYWRlckNvbXBvbmVudCA9IENhbGVuZGFySGVhZGVyQ29tcG9uZW50O1xyXG5cclxuICBnZXQgc2luZ2xlRm9ybUNvbnRyb2woKTogRm9ybUNvbnRyb2wge1xyXG4gICAgcmV0dXJuIHRoaXMuZm9ybUNvbnRyb2wgPz8gdGhpcy5fc2luZ2xlRGF0ZUNvbnRyb2w7XHJcbiAgfVxyXG5cclxuICBvbkRhdGVDaGFuZ2UoZXZlbnQ6IGFueSkge1xyXG4gICAgaWYgKHRoaXMuZGF0ZVR5cGUgPT09ICdzaW5nbGUnKSB7XHJcbiAgICAgIHRoaXMuc2luZ2xlRm9ybUNvbnRyb2wuc2V0VmFsdWUoZXZlbnQudmFsdWUpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCJAaWYgKGRhdGVUeXBlID09PSAncmFuZ2UnKSB7XHJcbiAgPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZGF0ZS1waWNrZXJcIj5cclxuICAgIDxtYXQtbGFiZWw+Q2hvb3NlIGEgZGF0ZTwvbWF0LWxhYmVsPlxyXG4gICAgPG1hdC1kYXRlLXJhbmdlLWlucHV0IFtyYW5nZVBpY2tlcl09XCJwaWNrZXJcIiBbZm9ybUdyb3VwXT1cInJhbmdlXCI+XHJcbiAgICAgIDxpbnB1dCBmb3JtQ29udHJvbE5hbWU9XCJzdGFydFwiIG1hdFN0YXJ0RGF0ZSBwbGFjZWhvbGRlcj1cIlN0YXJ0IGRhdGVcIj5cclxuICAgICAgPGlucHV0IGZvcm1Db250cm9sTmFtZT1cImVuZFwiIG1hdEVuZERhdGUgcGxhY2Vob2xkZXI9XCJFbmQgZGF0ZVwiPlxyXG4gICAgPC9tYXQtZGF0ZS1yYW5nZS1pbnB1dD5cclxuICAgIDxtYXQtaGludD57eyBoaW50VGV4dCB9fTwvbWF0LWhpbnQ+XHJcbiAgICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdEljb25TdWZmaXggW2Zvcl09XCJwaWNrZXJcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cclxuICAgIDxtYXQtZGF0ZS1yYW5nZS1waWNrZXIgW2NhbGVuZGFySGVhZGVyQ29tcG9uZW50XT1cIkNhbGVuZGFySGVhZGVyQ29tcG9uZW50XCIgI3BpY2tlcj5cclxuICAgIDwvbWF0LWRhdGUtcmFuZ2UtcGlja2VyPlxyXG4gIDwvbWF0LWZvcm0tZmllbGQ+XHJcbn0gQGVsc2Uge1xyXG4gIDxtYXQtZm9ybS1maWVsZCBhcHBlYXJhbmNlPVwib3V0bGluZVwiIGNsYXNzPVwiZGF0ZS1waWNrZXItZmllbGRcIj5cclxuICAgIDxtYXQtbGFiZWw+U2VsZWN0IERhdGU8L21hdC1sYWJlbD5cclxuICAgIDxpbnB1dCBtYXRJbnB1dCBbbWF0RGF0ZXBpY2tlcl09XCJwaWNrZXJTaW5nbGVcIiBbZm9ybUNvbnRyb2xdPVwic2luZ2xlRm9ybUNvbnRyb2xcIlxyXG4gICAgICAgICAgIFttaW5dPVwibWluRGF0ZVwiIFttYXhdPVwibWF4RGF0ZVwiIChkYXRlQ2hhbmdlKT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCI+XHJcbiAgICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdEljb25TdWZmaXggW2Zvcl09XCJwaWNrZXJTaW5nbGVcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cclxuICAgIDxtYXQtZGF0ZXBpY2tlciAjcGlja2VyU2luZ2xlPjwvbWF0LWRhdGVwaWNrZXI+XHJcbiAgICA8bWF0LWhpbnQ+e3sgaGludFRleHQgfX08L21hdC1oaW50PlxyXG4gIDwvbWF0LWZvcm0tZmllbGQ+XHJcbn1cclxuIl19
|
|
@@ -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,27 @@ 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._singleDateControl = new FormControl(null);
|
|
1884
1889
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1885
1890
|
}
|
|
1891
|
+
get singleFormControl() {
|
|
1892
|
+
return this.formControl ?? this._singleDateControl;
|
|
1893
|
+
}
|
|
1886
1894
|
onDateChange(event) {
|
|
1887
1895
|
if (this.dateType === 'single') {
|
|
1888
|
-
this.
|
|
1896
|
+
this.singleFormControl.setValue(event.value);
|
|
1889
1897
|
}
|
|
1890
1898
|
}
|
|
1891
1899
|
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]=\"
|
|
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 }] }); }
|
|
1893
1901
|
}
|
|
1894
1902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1895
1903
|
type: Component,
|
|
@@ -1906,7 +1914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1906
1914
|
MatNativeDateModule,
|
|
1907
1915
|
MatIconModule,
|
|
1908
1916
|
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]=\"
|
|
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"] }]
|
|
1910
1918
|
}], propDecorators: { range: [{
|
|
1911
1919
|
type: Input
|
|
1912
1920
|
}], dateType: [{
|