@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
59 lines • 8.23 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./date-picker.service";
import * as i2 from "../form-errors/form-errors.component";
import * as i3 from "@angular/forms";
import * as i4 from "@spartacus/core";
/**
* Component that adds a date control. While the native date picker works in most
* modern browsers, some browsers need more guidance (placeholder), validation and
* date conversion.
*
* The data picker supports (optional) min and max form controls, so that you can
* limit the start and/or end date.
*
* Most of the implementation is done in the `DatePickerFallbackDirective`.
*/
export class DatePickerComponent {
constructor(service) {
this.service = service;
this.update = new EventEmitter();
}
change() {
this.update.emit();
}
get placeholder() {
return this.service.placeholder;
}
get pattern() {
return this.service.pattern;
}
/**
* Only returns the date if we have a valid format. We do this to avoid
* loads of console errors coming from the datePipe while the user is typing
* (in those browsers where the date picker isn't supported).
*/
getDate(date) {
return this.service.isValidFormat(date) ? date : null;
}
}
DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.DatePickerService }], target: i0.ɵɵFactoryTarget.Component });
DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DatePickerComponent, selector: "cx-date-picker", inputs: { control: "control", min: "min", max: "max" }, outputs: { update: "update" }, ngImport: i0, template: "<input\n class=\"form-control\"\n type=\"date\"\n [formControl]=\"control\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n (change)=\"change()\"\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n/>\n<cx-form-errors\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n [control]=\"control\"\n prefix=\"formErrors.date\"\n [translationParams]=\"{\n max: getDate(max) | cxDate,\n min: getDate(min) | cxDate\n }\"\n></cx-form-errors>\n", components: [{ type: i2.FormErrorsComponent, selector: "cx-form-errors", inputs: ["prefix", "translationParams", "control"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }], pipes: { "cxDate": i4.CxDatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-date-picker',
templateUrl: './date-picker.component.html',
// we cannot use onPush change detection as the form state isn't updated without explicit
// change detection, see https://github.com/angular/angular/issues/10816
}]
}], ctorParameters: function () { return [{ type: i1.DatePickerService }]; }, propDecorators: { control: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], update: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9zaGFyZWQvY29tcG9uZW50cy9mb3JtL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvc2hhcmVkL2NvbXBvbmVudHMvZm9ybS9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFJdkU7Ozs7Ozs7OztHQVNHO0FBT0gsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixZQUFzQixPQUEwQjtRQUExQixZQUFPLEdBQVAsT0FBTyxDQUFtQjtRQUt0QyxXQUFNLEdBQXVCLElBQUksWUFBWSxFQUFFLENBQUM7SUFMUCxDQUFDO0lBT3BELE1BQU07UUFDSixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFJLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDO0lBQzlCLENBQUM7SUFFRDs7OztPQUlHO0lBRUgsT0FBTyxDQUFDLElBQVk7UUFDbEIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDeEQsQ0FBQzs7Z0hBNUJVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLDZJQ3BCaEMsdWNBb0JBOzJGREFhLG1CQUFtQjtrQkFOL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixXQUFXLEVBQUUsOEJBQThCO29CQUMzQyx5RkFBeUY7b0JBQ3pGLHdFQUF3RTtpQkFDekU7d0dBR1UsT0FBTztzQkFBZixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBRUksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRGF0ZVBpY2tlclNlcnZpY2UgfSBmcm9tICcuL2RhdGUtcGlja2VyLnNlcnZpY2UnO1xuXG4vKipcbiAqIENvbXBvbmVudCB0aGF0IGFkZHMgYSBkYXRlIGNvbnRyb2wuIFdoaWxlIHRoZSBuYXRpdmUgZGF0ZSBwaWNrZXIgd29ya3MgaW4gbW9zdFxuICogbW9kZXJuIGJyb3dzZXJzLCBzb21lIGJyb3dzZXJzIG5lZWQgbW9yZSBndWlkYW5jZSAocGxhY2Vob2xkZXIpLCB2YWxpZGF0aW9uIGFuZFxuICogZGF0ZSBjb252ZXJzaW9uLlxuICpcbiAqIFRoZSBkYXRhIHBpY2tlciBzdXBwb3J0cyAob3B0aW9uYWwpIG1pbiBhbmQgbWF4IGZvcm0gY29udHJvbHMsIHNvIHRoYXQgeW91IGNhblxuICogbGltaXQgdGhlIHN0YXJ0IGFuZC9vciBlbmQgZGF0ZS5cbiAqXG4gKiBNb3N0IG9mIHRoZSBpbXBsZW1lbnRhdGlvbiBpcyBkb25lIGluIHRoZSBgRGF0ZVBpY2tlckZhbGxiYWNrRGlyZWN0aXZlYC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3gtZGF0ZS1waWNrZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZGF0ZS1waWNrZXIuY29tcG9uZW50Lmh0bWwnLFxuICAvLyB3ZSBjYW5ub3QgdXNlIG9uUHVzaCBjaGFuZ2UgZGV0ZWN0aW9uIGFzIHRoZSBmb3JtIHN0YXRlIGlzbid0IHVwZGF0ZWQgd2l0aG91dCBleHBsaWNpdFxuICAvLyBjaGFuZ2UgZGV0ZWN0aW9uLCBzZWUgaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvYW5ndWxhci9pc3N1ZXMvMTA4MTZcbn0pXG5leHBvcnQgY2xhc3MgRGF0ZVBpY2tlckNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBzZXJ2aWNlOiBEYXRlUGlja2VyU2VydmljZSkge31cbiAgQElucHV0KCkgY29udHJvbDogRm9ybUNvbnRyb2w7XG4gIEBJbnB1dCgpIG1pbj86IHN0cmluZztcbiAgQElucHV0KCkgbWF4Pzogc3RyaW5nO1xuXG4gIEBPdXRwdXQoKSB1cGRhdGU6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBjaGFuZ2UoKSB7XG4gICAgdGhpcy51cGRhdGUuZW1pdCgpO1xuICB9XG5cbiAgZ2V0IHBsYWNlaG9sZGVyKCkge1xuICAgIHJldHVybiB0aGlzLnNlcnZpY2UucGxhY2Vob2xkZXI7XG4gIH1cblxuICBnZXQgcGF0dGVybigpIHtcbiAgICByZXR1cm4gdGhpcy5zZXJ2aWNlLnBhdHRlcm47XG4gIH1cblxuICAvKipcbiAgICogT25seSByZXR1cm5zIHRoZSBkYXRlIGlmIHdlIGhhdmUgYSB2YWxpZCBmb3JtYXQuIFdlIGRvIHRoaXMgdG8gYXZvaWRcbiAgICogbG9hZHMgb2YgY29uc29sZSBlcnJvcnMgY29taW5nIGZyb20gdGhlIGRhdGVQaXBlIHdoaWxlIHRoZSB1c2VyIGlzIHR5cGluZ1xuICAgKiAoaW4gdGhvc2UgYnJvd3NlcnMgd2hlcmUgdGhlIGRhdGUgcGlja2VyIGlzbid0IHN1cHBvcnRlZCkuXG4gICAqL1xuXG4gIGdldERhdGUoZGF0ZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5zZXJ2aWNlLmlzVmFsaWRGb3JtYXQoZGF0ZSkgPyBkYXRlIDogbnVsbDtcbiAgfVxufVxuIiwiPGlucHV0XG4gIGNsYXNzPVwiZm9ybS1jb250cm9sXCJcbiAgdHlwZT1cImRhdGVcIlxuICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXG4gIFthdHRyLm1pbl09XCJtaW5cIlxuICBbYXR0ci5tYXhdPVwibWF4XCJcbiAgKGNoYW5nZSk9XCJjaGFuZ2UoKVwiXG4gIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gIFtwYXR0ZXJuXT1cInBhdHRlcm5cIlxuLz5cbjxjeC1mb3JtLWVycm9yc1xuICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICBhcmlhLWF0b21pYz1cInRydWVcIlxuICBbY29udHJvbF09XCJjb250cm9sXCJcbiAgcHJlZml4PVwiZm9ybUVycm9ycy5kYXRlXCJcbiAgW3RyYW5zbGF0aW9uUGFyYW1zXT1cIntcbiAgICBtYXg6IGdldERhdGUobWF4KSB8IGN4RGF0ZSxcbiAgICBtaW46IGdldERhdGUobWluKSB8IGN4RGF0ZVxuICB9XCJcbj48L2N4LWZvcm0tZXJyb3JzPlxuIl19