ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
41 lines • 10.9 kB
JavaScript
import { Component, Input } from '@angular/core';
import { DateTime } from 'luxon';
import { FormControl, FormGroup } from "@angular/forms";
import { BaseComponent } from "ngx-gem-spaas";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/material/datepicker";
import * as i3 from "@angular/material/form-field";
/** A stand-alone date-range picker (not hooked up to the date service) */
export class DateRangePickerComponent extends BaseComponent {
constructor() {
super();
/** The label to be displayed in the form field (optional) */
this.label = '';
/** Your formgroup with 2 formcontrols: "start" (type DateTime) and "end" (type DateTime).
* Will be updated directly by the date picker */
this.fgDateRange = new FormGroup({
start: new FormControl(DateTime.now()),
end: new FormControl(DateTime.now()),
});
/** Minimum date in luxon DateTime */
this.minDate = null;
/** Maximum date in luxon DateTime */
this.maxDate = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateRangePickerComponent, selector: "spaas-date-range-picker", inputs: { label: "label", fgDateRange: "fgDateRange", minDate: "minDate", maxDate: "maxDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"date-range-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{label}}</mat-label>\r\n }\r\n <mat-date-range-input [formGroup]=\"fgDateRange\"\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\">\r\n <input matStartDate formControlName=\"start\" readonly>\r\n <input matEndDate formControlName=\"end\" readonly>\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker disabled=\"false\"></mat-date-range-picker>\r\n <mat-error>\r\n dates are not within the correct range\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n</div>\r\n", styles: [".date-range-picker{min-width:234px}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-date-range-picker', template: "<div class=\"date-range-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{label}}</mat-label>\r\n }\r\n <mat-date-range-input [formGroup]=\"fgDateRange\"\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\">\r\n <input matStartDate formControlName=\"start\" readonly>\r\n <input matEndDate formControlName=\"end\" readonly>\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker disabled=\"false\"></mat-date-range-picker>\r\n <mat-error>\r\n dates are not within the correct range\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n</div>\r\n", styles: [".date-range-picker{min-width:234px}\n"] }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], fgDateRange: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1yYW5nZS1waWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9kYXRlL3NyYy9kYXRlLXJhbmdlLXBpY2tlci9kYXRlLXJhbmdlLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZ2VtLXNwYWFzL2RhdGUvc3JjL2RhdGUtcmFuZ2UtcGlja2VyL2RhdGUtcmFuZ2UtcGlja2VyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxPQUFPLENBQUM7QUFDL0IsT0FBTyxFQUFDLFdBQVcsRUFBRSxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7OztBQU81QywwRUFBMEU7QUFDMUUsTUFBTSxPQUFPLHdCQUF5QixTQUFRLGFBQWE7SUFpQnpEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFoQlYsNkRBQTZEO1FBQ3BELFVBQUssR0FBVyxFQUFFLENBQUM7UUFDNUI7eURBQ2lEO1FBQ3hDLGdCQUFXLEdBQ2xCLElBQUksU0FBUyxDQUFDO1lBQ1osS0FBSyxFQUFFLElBQUksV0FBVyxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBMEI7WUFDL0QsR0FBRyxFQUFFLElBQUksV0FBVyxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBMEI7U0FDOUQsQ0FBQyxDQUFDO1FBRUwscUNBQXFDO1FBQzVCLFlBQU8sR0FBb0IsSUFBSSxDQUFDO1FBQ3pDLHFDQUFxQztRQUM1QixZQUFPLEdBQW9CLElBQUksQ0FBQztJQUl6QyxDQUFDOytHQW5CVSx3QkFBd0I7bUdBQXhCLHdCQUF3QixzTENYckMsOHlCQXFCQTs7NEZEVmEsd0JBQXdCO2tCQU5wQyxTQUFTOytCQUNFLHlCQUF5Qjt3REFRMUIsS0FBSztzQkFBYixLQUFLO2dCQUdHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLO2dCQUVHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7RGF0ZVRpbWV9IGZyb20gJ2x1eG9uJztcclxuaW1wb3J0IHtGb3JtQ29udHJvbCwgRm9ybUdyb3VwfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHtCYXNlQ29tcG9uZW50fSBmcm9tIFwibmd4LWdlbS1zcGFhc1wiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzcGFhcy1kYXRlLXJhbmdlLXBpY2tlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGUtcmFuZ2UtcGlja2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9kYXRlLXJhbmdlLXBpY2tlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbi8qKiBBIHN0YW5kLWFsb25lIGRhdGUtcmFuZ2UgcGlja2VyIChub3QgaG9va2VkIHVwIHRvIHRoZSBkYXRlIHNlcnZpY2UpICovXHJcbmV4cG9ydCBjbGFzcyBEYXRlUmFuZ2VQaWNrZXJDb21wb25lbnQgZXh0ZW5kcyBCYXNlQ29tcG9uZW50IHtcclxuXHJcbiAgLyoqIFRoZSBsYWJlbCB0byBiZSBkaXNwbGF5ZWQgaW4gdGhlIGZvcm0gZmllbGQgKG9wdGlvbmFsKSAqL1xyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcclxuICAvKiogWW91ciBmb3JtZ3JvdXAgd2l0aCAyIGZvcm1jb250cm9sczogXCJzdGFydFwiICh0eXBlIERhdGVUaW1lKSBhbmQgXCJlbmRcIiAodHlwZSBEYXRlVGltZSkuXHJcbiAgICogV2lsbCBiZSB1cGRhdGVkIGRpcmVjdGx5IGJ5IHRoZSBkYXRlIHBpY2tlciAqL1xyXG4gIEBJbnB1dCgpIGZnRGF0ZVJhbmdlOiBGb3JtR3JvdXA8eyBzdGFydDogRm9ybUNvbnRyb2w8RGF0ZVRpbWU+LCBlbmQ6IEZvcm1Db250cm9sPERhdGVUaW1lPiB9PiA9XHJcbiAgICBuZXcgRm9ybUdyb3VwKHtcclxuICAgICAgc3RhcnQ6IG5ldyBGb3JtQ29udHJvbChEYXRlVGltZS5ub3coKSkgYXMgRm9ybUNvbnRyb2w8RGF0ZVRpbWU+LFxyXG4gICAgICBlbmQ6IG5ldyBGb3JtQ29udHJvbChEYXRlVGltZS5ub3coKSkgYXMgRm9ybUNvbnRyb2w8RGF0ZVRpbWU+LFxyXG4gICAgfSk7XHJcblxyXG4gIC8qKiBNaW5pbXVtIGRhdGUgaW4gbHV4b24gRGF0ZVRpbWUgKi9cclxuICBASW5wdXQoKSBtaW5EYXRlOiBEYXRlVGltZSB8IG51bGwgPSBudWxsO1xyXG4gIC8qKiBNYXhpbXVtIGRhdGUgaW4gbHV4b24gRGF0ZVRpbWUgKi9cclxuICBASW5wdXQoKSBtYXhEYXRlOiBEYXRlVGltZSB8IG51bGwgPSBudWxsO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIHN1cGVyKCk7XHJcbiAgfVxyXG5cclxuICAvLyAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxyXG4gIC8vIExPQUQgREFUQVxyXG4gIC8vICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXHJcblxyXG4gIC8vICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXHJcbiAgLy8gVUlcclxuICAvLyAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZGF0ZS1yYW5nZS1waWNrZXIgZmxleFwiPlxyXG5cclxuICA8bWF0LWZvcm0tZmllbGQgY2xhc3M9XCJncm93LWhcIj5cclxuICAgIEBpZiAobGFiZWwpIHtcclxuICAgICAgPG1hdC1sYWJlbD57e2xhYmVsfX08L21hdC1sYWJlbD5cclxuICAgIH1cclxuICAgIDxtYXQtZGF0ZS1yYW5nZS1pbnB1dCBbZm9ybUdyb3VwXT1cImZnRGF0ZVJhbmdlXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICBbcmFuZ2VQaWNrZXJdPVwicGlja2VyXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICBbbWluXT1cIm1pbkRhdGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFttYXhdPVwibWF4RGF0ZVwiPlxyXG4gICAgICA8aW5wdXQgbWF0U3RhcnREYXRlIGZvcm1Db250cm9sTmFtZT1cInN0YXJ0XCIgcmVhZG9ubHk+XHJcbiAgICAgIDxpbnB1dCBtYXRFbmREYXRlIGZvcm1Db250cm9sTmFtZT1cImVuZFwiIHJlYWRvbmx5PlxyXG4gICAgPC9tYXQtZGF0ZS1yYW5nZS1pbnB1dD5cclxuICAgIDxtYXQtZGF0ZXBpY2tlci10b2dnbGUgW2Zvcl09XCJwaWNrZXJcIiBtYXRJY29uUHJlZml4PjwvbWF0LWRhdGVwaWNrZXItdG9nZ2xlPlxyXG4gICAgPG1hdC1kYXRlLXJhbmdlLXBpY2tlciAjcGlja2VyIGRpc2FibGVkPVwiZmFsc2VcIj48L21hdC1kYXRlLXJhbmdlLXBpY2tlcj5cclxuICAgIDxtYXQtZXJyb3I+XHJcbiAgICAgIGRhdGVzIGFyZSBub3Qgd2l0aGluIHRoZSBjb3JyZWN0IHJhbmdlXHJcbiAgICA8L21hdC1lcnJvcj5cclxuICA8L21hdC1mb3JtLWZpZWxkPlxyXG5cclxuPC9kaXY+XHJcbiJdfQ==