@aurelia-toolkit/mdc-datepicker
Version:
Aurelia Toolkit MDC Datepicker
225 lines • 9.47 kB
JavaScript
import { __awaiter, __decorate, __generator, __metadata } from "tslib";
/* eslint-disable @typescript-eslint/no-dynamic-delete */
import { useView, PLATFORM, customElement, inject, TaskQueue } from 'aurelia-framework';
import { bindable } from 'aurelia-typed-observable-plugin';
import { parse } from 'date-fns/parse';
import { format } from 'date-fns/format';
import { MdcDialogService } from '@aurelia-mdc-web/dialog';
import { MdcDatepickerDialog } from '../mdc-datepicker-dialog/mdc-datepicker-dialog';
import { MdcDefaultTextFieldConfiguration } from '@aurelia-mdc-web/text-field';
var DATE_ISO_FORMAT = 'yyyy-MM-dd';
var DATETIME_ISO_FORMAT = 'yyyy-MM-dd\'T\'HH:mm:ss';
var MdcDatepicker = /** @class */ (function () {
function MdcDatepicker(element, taskQueue, dialogService, defaultTextFieldConfiguration) {
this.element = element;
this.taskQueue = taskQueue;
this.dialogService = dialogService;
this.defaultTextFieldConfiguration = defaultTextFieldConfiguration;
this.outlined = this.defaultTextFieldConfiguration.outlined;
this.format = 'dd/MM/yyyy';
this.inputmaskFormat = 'dd/mm/yyyy';
this.dialogFormat = 'E, MMM d';
defineMdcDatepickerElementApis(this.element);
}
Object.defineProperty(MdcDatepicker.prototype, "value", {
get: function () {
if (this.input) {
return this.inputmaskValue !== '' && this.inputmaskValue !== undefined
? format(parse(this.inputmaskValue, this.format, new Date()), this.getIsoFormat())
: '';
}
else {
return this._value;
}
},
set: function (value) {
this._value = value;
if (this.input) {
this.inputmaskValue = value !== '' ? format(parse(value, this.getIsoFormat(), new Date()), this.format) : '';
}
},
enumerable: false,
configurable: true
});
MdcDatepicker.prototype.attached = function () {
if (this.input !== undefined) {
this.value = this._value;
}
};
MdcDatepicker.prototype.handleBlur = function (e) {
e.cancelBubble = true;
this.element.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
};
MdcDatepicker.prototype.handleChange = function (e) {
var _this = this;
e.cancelBubble = true;
this.taskQueue.queueTask(function () { return _this.element.dispatchEvent(new CustomEvent('change', { bubbles: true })); });
};
MdcDatepicker.prototype.handleInput = function (e) {
var _this = this;
e.cancelBubble = true;
this.taskQueue.queueTask(function () { return _this.element.dispatchEvent(new CustomEvent('input', { bubbles: true })); });
};
MdcDatepicker.prototype.getIsoFormat = function () {
return this.time ? DATETIME_ISO_FORMAT : DATE_ISO_FORMAT;
};
MdcDatepicker.prototype.getDateValue = function () {
var value = this.value;
return value !== '' ? parse(value, this.getIsoFormat(), new Date()) : undefined;
};
MdcDatepicker.prototype.open = function () {
return __awaiter(this, void 0, void 0, function () {
var data, result, value;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
data = {
date: this.getDateValue(),
options: {
label: this.label,
format: this.dialogFormat,
min: this.min,
max: this.max,
disableFunction: this.disableFunction,
disableWeekends: this.disableWeekends,
firstDay: isNaN(this.firstDay) ? undefined : this.firstDay,
i18n: this.mdcI18n,
showAll: this.showAll
}
};
Object.keys(data.options).filter(function (key) { return data.options[key] === undefined; }).forEach(function (key) { return delete data.options[key]; });
if (this.mdcI18n) {
Object.keys(data.options.i18n).filter(function (key) { return data.options.i18n[key] === undefined; }).forEach(function (key) { return delete data.options.i18n[key]; });
}
this.element.dispatchEvent(new CustomEvent('open'));
return [4 /*yield*/, this.dialogService.open({ viewModel: MdcDatepickerDialog, model: data })];
case 1:
result = _a.sent();
this.element.dispatchEvent(new CustomEvent('close'));
if (result === 'ok') {
if (data.date) {
value = format(data.date, this.getIsoFormat());
if (this.value !== value) {
this.value = value;
this.element.dispatchEvent(new CustomEvent('change', { bubbles: true }));
}
}
else {
this.value = '';
}
}
this.input.focus();
return [2 /*return*/];
}
});
});
};
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcDatepicker.prototype, "outlined", void 0);
__decorate([
bindable,
__metadata("design:type", String)
], MdcDatepicker.prototype, "label", void 0);
__decorate([
bindable,
__metadata("design:type", String)
], MdcDatepicker.prototype, "format", void 0);
__decorate([
bindable,
__metadata("design:type", String)
], MdcDatepicker.prototype, "inputmaskFormat", void 0);
__decorate([
bindable,
__metadata("design:type", String)
], MdcDatepicker.prototype, "dialogFormat", void 0);
__decorate([
bindable.date,
__metadata("design:type", Date)
], MdcDatepicker.prototype, "min", void 0);
__decorate([
bindable.date,
__metadata("design:type", Date)
], MdcDatepicker.prototype, "max", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], MdcDatepicker.prototype, "disableFunction", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcDatepicker.prototype, "disableWeekends", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcDatepicker.prototype, "showAll", void 0);
__decorate([
bindable.number,
__metadata("design:type", Number)
], MdcDatepicker.prototype, "firstDay", void 0);
__decorate([
bindable,
__metadata("design:type", Object)
], MdcDatepicker.prototype, "mdcI18n", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcDatepicker.prototype, "readonly", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcDatepicker.prototype, "time", void 0);
MdcDatepicker = __decorate([
inject(Element, TaskQueue, MdcDialogService, MdcDefaultTextFieldConfiguration),
customElement('mdc-datepicker'),
useView(PLATFORM.moduleName('./mdc-datepicker.html')),
__metadata("design:paramtypes", [HTMLElement, TaskQueue, MdcDialogService, MdcDefaultTextFieldConfiguration])
], MdcDatepicker);
return MdcDatepicker;
}());
export { MdcDatepicker };
function defineMdcDatepickerElementApis(element) {
Object.defineProperties(element, {
value: {
get: function () {
return this.au.controller.viewModel.value;
},
set: function (value) {
this.au.controller.viewModel.value = value;
},
configurable: true
},
valid: {
get: function () {
return this.au.controller.viewModel.input.valid;
},
set: function (value) {
this.au.controller.viewModel.input.valid = value;
},
configurable: true
},
addError: {
value: function (error) {
var _a;
(_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.addError(error);
},
configurable: true
},
removeError: {
value: function (error) {
var _a;
(_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.removeError(error);
},
configurable: true
},
renderErrors: {
value: function () {
var _a;
(_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.renderErrors();
},
configurable: true
}
});
}
//# sourceMappingURL=mdc-datepicker.js.map