@junte/ui/esm5/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 = {}));
var DatePeriodComponent = /** @class */ (function () {
    function DatePeriodComponent() {
        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);
    return DatePeriodComponent;
}());
export { DatePeriodComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1wZXJpb2QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGp1bnRlL3VpLyIsInNvdXJjZXMiOlsibGliL2R5bmFtaWMvZGF0ZS1wZXJpb2QvZGF0ZS1wZXJpb2QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUV6QyxNQUFNLENBQU4sSUFBWSxlQUVYO0FBRkQsV0FBWSxlQUFlO0lBQ3pCLGtDQUFlLENBQUE7QUFDakIsQ0FBQyxFQUZXLGVBQWUsS0FBZixlQUFlLFFBRTFCO0FBTUQ7SUFBQTtRQUVxQyxTQUFJLEdBQUcsc0JBQXNCLENBQUM7UUFDakUsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUVSLGdCQUFXLEdBQUc7WUFDWixJQUFJLEVBQUUsS0FBSztZQUNYLE9BQU8sRUFBRSxNQUFNO1NBQ2hCLENBQUM7UUFFTyxTQUFJLEdBQW9CLGVBQWUsQ0FBQyxJQUFJLENBQUM7SUFzQnhELENBQUM7SUE5QjJCO1FBQXpCLFdBQVcsQ0FBQyxXQUFXLENBQUM7O3FEQUF3QztJQVF4RDtRQUFSLEtBQUssRUFBRTs7cURBQThDO0lBTzdDO1FBTFIsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLHNCQUFzQjtZQUNuQyxJQUFJLEVBQUUsTUFBTTtZQUNaLE9BQU8sRUFBRSxZQUFZO1NBQ3RCLENBQUM7UUFDRCxLQUFLLEVBQUU7a0NBQVEsSUFBSTtzREFBQztJQU9aO1FBTFIsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLG9CQUFvQjtZQUNqQyxJQUFJLEVBQUUsTUFBTTtZQUNaLE9BQU8sRUFBRSxZQUFZO1NBQ3RCLENBQUM7UUFDRCxLQUFLLEVBQUU7a0NBQU0sSUFBSTtvREFBQztJQU1WO1FBSlIsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLGNBQWM7WUFDM0IsSUFBSSxFQUFFLE1BQU07U0FDYixDQUFDO1FBQ0QsS0FBSyxFQUFFO2tDQUFVLElBQUk7d0RBQUM7SUE5QlosbUJBQW1CO1FBSi9CLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxpQkFBaUI7WUFDM0Isd3RFQUE4QztTQUMvQyxDQUFDO09BQ1csbUJBQW1CLENBZ0MvQjtJQUFELDBCQUFDO0NBQUEsQUFoQ0QsSUFnQ0M7U0FoQ1ksbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFByb3BlcnR5QXBpIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzL2FwaSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvdWknO1xuXG5leHBvcnQgZW51bSBEYXRlUGVyaW9kQmFzZXMge1xuICBkYXlzID0gJ2RheShzKSdcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LWRhdGUtcGVyaW9kJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGUtcGVyaW9kLmVuY2Fwc3VsYXRlZC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBEYXRlUGVyaW9kQ29tcG9uZW50IHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuaG9zdCcpIHJlYWRvbmx5IGhvc3QgPSAnam50LWRhdGUtcGVyaW9kLWhvc3QnO1xuICB1aSA9IFVJO1xuXG4gIGRheXNNYXBwaW5nID0ge1xuICAgICc9MSc6ICdkYXknLFxuICAgICdvdGhlcic6ICdkYXlzJ1xuICB9O1xuXG4gIEBJbnB1dCgpIGJhc2U6IERhdGVQZXJpb2RCYXNlcyA9IERhdGVQZXJpb2RCYXNlcy5kYXlzO1xuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdTdGFydCBkYXRlIG9mIHBlcmlvZCcsXG4gICAgdHlwZTogJ0RhdGUnLFxuICAgIGRlZmF1bHQ6ICduZXcgRGF0ZSgpJ1xuICB9KVxuICBASW5wdXQoKSBzdGFydDogRGF0ZTtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnRW5kIGRhdGUgb2YgcGVyaW9kJyxcbiAgICB0eXBlOiAnRGF0ZScsXG4gICAgZGVmYXVsdDogJ25ldyBEYXRlKCknXG4gIH0pXG4gIEBJbnB1dCgpIGVuZDogRGF0ZTtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnQ3VycmVudCBkYXRlJyxcbiAgICB0eXBlOiAnRGF0ZScsXG4gIH0pXG4gIEBJbnB1dCgpIGN1cnJlbnQ6IERhdGU7XG5cbn1cbiJdfQ==