@junte/ui/esm2015/lib/dynamic/date-period/date-period.component.js

Quality Angular UI components kit

import { __decorate, __metadata } from "tslib";
import { Component, HostBinding, Input } from '@angular/core';
import { PropertyApi } from '../../core/decorators/api';
import { UI } from '../../core/enums/ui';
export var DatePeriodBases;
(function (DatePeriodBases) {
    DatePeriodBases["days"] = "day(s)";
})(DatePeriodBases || (DatePeriodBases = {}));
let DatePeriodComponent = class DatePeriodComponent {
    constructor() {
        this.host = 'jnt-date-period-host';
        this.ui = UI;
        this.daysMapping = {
            '=1': 'day',
            'other': 'days'
        };
        this.base = DatePeriodBases.days;
    }
};
__decorate([
    HostBinding('attr.host'),
    __metadata("design:type", Object)
], DatePeriodComponent.prototype, "host", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], DatePeriodComponent.prototype, "base", void 0);
__decorate([
    PropertyApi({
        description: 'Start date of period',
        type: 'Date',
        default: 'new Date()'
    }),
    Input(),
    __metadata("design:type", Date)
], DatePeriodComponent.prototype, "start", void 0);
__decorate([
    PropertyApi({
        description: 'End date of period',
        type: 'Date',
        default: 'new Date()'
    }),
    Input(),
    __metadata("design:type", Date)
], DatePeriodComponent.prototype, "end", void 0);
__decorate([
    PropertyApi({
        description: 'Current date',
        type: 'Date',
    }),
    Input(),
    __metadata("design:type", Date)
], DatePeriodComponent.prototype, "current", void 0);
DatePeriodComponent = __decorate([
    Component({
        selector: 'jnt-date-period',
        template: "<jnt-stack child-of=\"jnt-date-period-host\" data-dates [orientation]=\"ui.orientation.horizontal\" [justify]=\"ui.justify.between\"\n           [align]=\"ui.align.end\">\n  <div child-of=\"jnt-date-period-host\" *ngIf=\"start\" data-date data-left>\n    <div child-of=\"jnt-date-period-host\" >{{start | date: \"dd.MM\"}}</div>\n  </div>\n  <div child-of=\"jnt-date-period-host\" *ngIf=\"end\" data-date data-right>\n    <div child-of=\"jnt-date-period-host\" >{{end | date: \"dd.MM\"}}</div>\n  </div>\n</jnt-stack>\n\n<ng-container *ngIf=\"!!current; else noCurrent\">\n  <div child-of=\"jnt-date-period-host\" data-bar>\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start && !!end && start < end && start <= current && current < end\" data-progress\n         [style.width.%]=\"((current | jntDifferenceInCalendarDays:start) + 1) /\n          ((end || current | jntDifferenceInCalendarDays:start) + 1) * 100\">\n    </div>\n\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"(current >= end) || (!!start && !end && current > start)\" data-progress data-full></div>\n\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start\" data-line data-left></div>\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!end\" data-line data-right></div>\n  </div>\n\n  <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start && !!end\" data-days>\n    {{(current < end\n      ? (end | jntDifferenceInCalendarDays:start) - (current | jntDifferenceInCalendarDays:start)\n      : current > end ? (end | jntDifferenceInCalendarDays:start) : 0\n    ) + 1}} days\n  </div>\n</ng-container>\n\n<ng-template #noCurrent>\n  <div child-of=\"jnt-date-period-host\" data-bar>\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start && !!end && start <= end\" data-progress data-full></div>\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start\" data-line data-left></div>\n    <div child-of=\"jnt-date-period-host\" *ngIf=\"!!end\" data-line data-right></div>\n  </div>\n  <div child-of=\"jnt-date-period-host\" *ngIf=\"!!start && !!end\" data-days>\n    {{start <= end ? (end | jntDifferenceInCalendarDays:start) + 1 : 0}}\n    {{(start <= end ? (end | jntDifferenceInCalendarDays:start) + 1 : 0) | i18nPlural: daysMapping}}\n  </div>\n</ng-template>"
    })
], DatePeriodComponent);
export { DatePeriodComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1wZXJpb2QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGp1bnRlL3VpLyIsInNvdXJjZXMiOlsibGliL2R5bmFtaWMvZGF0ZS1wZXJpb2QvZGF0ZS1wZXJpb2QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUV6QyxNQUFNLENBQU4sSUFBWSxlQUVYO0FBRkQsV0FBWSxlQUFlO0lBQ3pCLGtDQUFlLENBQUE7QUFDakIsQ0FBQyxFQUZXLGVBQWUsS0FBZixlQUFlLFFBRTFCO0FBTUQsSUFBYSxtQkFBbUIsR0FBaEMsTUFBYSxtQkFBbUI7SUFBaEM7UUFFcUMsU0FBSSxHQUFHLHNCQUFzQixDQUFDO1FBQ2pFLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFUixnQkFBVyxHQUFHO1lBQ1osSUFBSSxFQUFFLEtBQUs7WUFDWCxPQUFPLEVBQUUsTUFBTTtTQUNoQixDQUFDO1FBRU8sU0FBSSxHQUFvQixlQUFlLENBQUMsSUFBSSxDQUFDO0lBc0J4RCxDQUFDO0NBQUEsQ0FBQTtBQTlCMkI7SUFBekIsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7aURBQXdDO0FBUXhEO0lBQVIsS0FBSyxFQUFFOztpREFBOEM7QUFPN0M7SUFMUixXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUsc0JBQXNCO1FBQ25DLElBQUksRUFBRSxNQUFNO1FBQ1osT0FBTyxFQUFFLFlBQVk7S0FDdEIsQ0FBQztJQUNELEtBQUssRUFBRTs4QkFBUSxJQUFJO2tEQUFDO0FBT1o7SUFMUixXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUsb0JBQW9CO1FBQ2pDLElBQUksRUFBRSxNQUFNO1FBQ1osT0FBTyxFQUFFLFlBQVk7S0FDdEIsQ0FBQztJQUNELEtBQUssRUFBRTs4QkFBTSxJQUFJO2dEQUFDO0FBTVY7SUFKUixXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUsY0FBYztRQUMzQixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7SUFDRCxLQUFLLEVBQUU7OEJBQVUsSUFBSTtvREFBQztBQTlCWixtQkFBbUI7SUFKL0IsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLGlCQUFpQjtRQUMzQix3dEVBQThDO0tBQy9DLENBQUM7R0FDVyxtQkFBbUIsQ0FnQy9CO1NBaENZLG1CQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9wZXJ0eUFwaSB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy9hcGknO1xuaW1wb3J0IHsgVUkgfSBmcm9tICcuLi8uLi9jb3JlL2VudW1zL3VpJztcblxuZXhwb3J0IGVudW0gRGF0ZVBlcmlvZEJhc2VzIHtcbiAgZGF5cyA9ICdkYXkocyknXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2pudC1kYXRlLXBlcmlvZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRlLXBlcmlvZC5lbmNhcHN1bGF0ZWQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgRGF0ZVBlcmlvZENvbXBvbmVudCB7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmhvc3QnKSByZWFkb25seSBob3N0ID0gJ2pudC1kYXRlLXBlcmlvZC1ob3N0JztcbiAgdWkgPSBVSTtcblxuICBkYXlzTWFwcGluZyA9IHtcbiAgICAnPTEnOiAnZGF5JyxcbiAgICAnb3RoZXInOiAnZGF5cydcbiAgfTtcblxuICBASW5wdXQoKSBiYXNlOiBEYXRlUGVyaW9kQmFzZXMgPSBEYXRlUGVyaW9kQmFzZXMuZGF5cztcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnU3RhcnQgZGF0ZSBvZiBwZXJpb2QnLFxuICAgIHR5cGU6ICdEYXRlJyxcbiAgICBkZWZhdWx0OiAnbmV3IERhdGUoKSdcbiAgfSlcbiAgQElucHV0KCkgc3RhcnQ6IERhdGU7XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ0VuZCBkYXRlIG9mIHBlcmlvZCcsXG4gICAgdHlwZTogJ0RhdGUnLFxuICAgIGRlZmF1bHQ6ICduZXcgRGF0ZSgpJ1xuICB9KVxuICBASW5wdXQoKSBlbmQ6IERhdGU7XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ0N1cnJlbnQgZGF0ZScsXG4gICAgdHlwZTogJ0RhdGUnLFxuICB9KVxuICBASW5wdXQoKSBjdXJyZW50OiBEYXRlO1xuXG59XG4iXX0=