@aurelia-toolkit/mdc-datepicker/dist/es2015/mdc-datepicker/mdc-datepicker.js

Aurelia Toolkit MDC Datepicker

import { __awaiter, __decorate, __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';
const DATE_ISO_FORMAT = 'yyyy-MM-dd';
const DATETIME_ISO_FORMAT = 'yyyy-MM-dd\'T\'HH:mm:ss';
let MdcDatepicker = class MdcDatepicker {
    constructor(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);
    }
    get value() {
        if (this.input) {
            return this.inputmaskValue !== '' && this.inputmaskValue !== undefined
                ? format(parse(this.inputmaskValue, this.format, new Date()), this.getIsoFormat())
                : '';
        }
        else {
            return this._value;
        }
    }
    set value(value) {
        this._value = value;
        if (this.input) {
            this.inputmaskValue = value !== '' ? format(parse(value, this.getIsoFormat(), new Date()), this.format) : '';
        }
    }
    attached() {
        if (this.input !== undefined) {
            this.value = this._value;
        }
    }
    handleBlur(e) {
        e.cancelBubble = true;
        this.element.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
    }
    handleChange(e) {
        e.cancelBubble = true;
        this.taskQueue.queueTask(() => this.element.dispatchEvent(new CustomEvent('change', { bubbles: true })));
    }
    handleInput(e) {
        e.cancelBubble = true;
        this.taskQueue.queueTask(() => this.element.dispatchEvent(new CustomEvent('input', { bubbles: true })));
    }
    getIsoFormat() {
        return this.time ? DATETIME_ISO_FORMAT : DATE_ISO_FORMAT;
    }
    getDateValue() {
        const value = this.value;
        return value !== '' ? parse(value, this.getIsoFormat(), new Date()) : undefined;
    }
    open() {
        return __awaiter(this, void 0, void 0, function* () {
            const 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(key => data.options[key] === undefined).forEach(key => delete data.options[key]);
            if (this.mdcI18n) {
                Object.keys(data.options.i18n).filter(key => data.options.i18n[key] === undefined).forEach(key => delete data.options.i18n[key]);
            }
            this.element.dispatchEvent(new CustomEvent('open'));
            const result = yield this.dialogService.open({ viewModel: MdcDatepickerDialog, model: data });
            this.element.dispatchEvent(new CustomEvent('close'));
            if (result === 'ok') {
                if (data.date) {
                    const 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();
        });
    }
};
__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);
export { MdcDatepicker };
function defineMdcDatepickerElementApis(element) {
    Object.defineProperties(element, {
        value: {
            get() {
                return this.au.controller.viewModel.value;
            },
            set(value) {
                this.au.controller.viewModel.value = value;
            },
            configurable: true
        },
        valid: {
            get() {
                return this.au.controller.viewModel.input.valid;
            },
            set(value) {
                this.au.controller.viewModel.input.valid = value;
            },
            configurable: true
        },
        addError: {
            value(error) {
                var _a;
                (_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.addError(error);
            },
            configurable: true
        },
        removeError: {
            value(error) {
                var _a;
                (_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.removeError(error);
            },
            configurable: true
        },
        renderErrors: {
            value() {
                var _a;
                (_a = this.au.controller.viewModel.input) === null || _a === void 0 ? void 0 : _a.renderErrors();
            },
            configurable: true
        }
    });
}
//# sourceMappingURL=mdc-datepicker.js.map