angular-calendar-timeline
Version:
A timeline for angular that shows events on a timeline board in different modes: days, weeks, and months.
34 lines • 7.05 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TimelineDateMarkerComponent {
set scale(scale) {
this._checkIsInScaleRange(scale);
}
;
constructor(_cdr) {
this._cdr = _cdr;
this.isInScaleRange = true;
this.leftPosition = 0;
}
_checkIsInScaleRange(scale) {
const now = Date.now();
this.isInScaleRange = scale.startDate.getTime() <= now && scale.endDate.getTime() >= now;
this._cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineDateMarkerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineDateMarkerComponent, selector: "timeline-date-marker", inputs: { leftPosition: "leftPosition", headerHeight: "headerHeight", customTemplate: "customTemplate", scale: "scale" }, ngImport: i0, template: "<ng-container *ngIf=\"isInScaleRange\">\r\n <ng-container *ngIf=\"customTemplate; else defaultDateMarkerTemplate\"\r\n [ngTemplateOutlet]=\"customTemplate\"\r\n [ngTemplateOutletContext]=\"{leftPosition: leftPosition}\">\r\n </ng-container>\r\n\r\n <ng-template #defaultDateMarkerTemplate>\r\n <div [style.left.px]=\"leftPosition\"\r\n [style.height]=\"'calc(100% - ' + headerHeight + 'px)'\"\r\n class='date-marker'></div>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".date-marker{position:absolute;width:2px;height:100%;background-color:#2ac226;z-index:2;display:flex;flex-direction:column;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineDateMarkerComponent, decorators: [{
type: Component,
args: [{ selector: 'timeline-date-marker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isInScaleRange\">\r\n <ng-container *ngIf=\"customTemplate; else defaultDateMarkerTemplate\"\r\n [ngTemplateOutlet]=\"customTemplate\"\r\n [ngTemplateOutletContext]=\"{leftPosition: leftPosition}\">\r\n </ng-container>\r\n\r\n <ng-template #defaultDateMarkerTemplate>\r\n <div [style.left.px]=\"leftPosition\"\r\n [style.height]=\"'calc(100% - ' + headerHeight + 'px)'\"\r\n class='date-marker'></div>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".date-marker{position:absolute;width:2px;height:100%;background-color:#2ac226;z-index:2;display:flex;flex-direction:column;transform:translate(-50%)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leftPosition: [{
type: Input
}], headerHeight: [{
type: Input
}], customTemplate: [{
type: Input
}], scale: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUtZGF0ZS1tYXJrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1jYWxlbmRhci10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvZGF0ZS1tYXJrZXIvdGltZWxpbmUtZGF0ZS1tYXJrZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1jYWxlbmRhci10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvZGF0ZS1tYXJrZXIvdGltZWxpbmUtZGF0ZS1tYXJrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFxQixTQUFTLEVBQUUsS0FBSyxFQUFlLE1BQU0sZUFBZSxDQUFDOzs7QUFTMUcsTUFBTSxPQUFPLDJCQUEyQjtJQVN0QyxJQUFhLEtBQUssQ0FBQyxLQUFhO1FBQzlCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBQUEsQ0FBQztJQUVGLFlBQW9CLElBQXVCO1FBQXZCLFNBQUksR0FBSixJQUFJLENBQW1CO1FBWjNDLG1CQUFjLEdBQVksSUFBSSxDQUFDO1FBRXRCLGlCQUFZLEdBQVcsQ0FBQyxDQUFDO0lBV2xDLENBQUM7SUFFTyxvQkFBb0IsQ0FBQyxLQUFhO1FBQ3hDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFLElBQUksR0FBRyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBTyxFQUFFLElBQUksR0FBRyxDQUFDO1FBQ3pGLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDNUIsQ0FBQzsrR0FwQlUsMkJBQTJCO21HQUEzQiwyQkFBMkIsc0xDVHhDLHdnQkFZQTs7NEZESGEsMkJBQTJCO2tCQU52QyxTQUFTOytCQUNFLHNCQUFzQixtQkFHZix1QkFBdUIsQ0FBQyxNQUFNO3NGQUt0QyxZQUFZO3NCQUFwQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsY0FBYztzQkFBdEIsS0FBSztnQkFFTyxLQUFLO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJU2NhbGUgfSBmcm9tIFwiLi4vLi4vbW9kZWxzXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3RpbWVsaW5lLWRhdGUtbWFya2VyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUtZGF0ZS1tYXJrZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RpbWVsaW5lLWRhdGUtbWFya2VyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcclxufSlcclxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lRGF0ZU1hcmtlckNvbXBvbmVudCB7XHJcbiAgaXNJblNjYWxlUmFuZ2U6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICBASW5wdXQoKSBsZWZ0UG9zaXRpb246IG51bWJlciA9IDA7XHJcblxyXG4gIEBJbnB1dCgpIGhlYWRlckhlaWdodDogbnVtYmVyO1xyXG5cclxuICBASW5wdXQoKSBjdXN0b21UZW1wbGF0ZTogVGVtcGxhdGVSZWY8eyBsZWZ0UG9zaXRpb246IG51bWJlciB9PiB8IHVuZGVmaW5lZDtcclxuXHJcbiAgQElucHV0KCkgc2V0IHNjYWxlKHNjYWxlOiBJU2NhbGUpIHtcclxuICAgIHRoaXMuX2NoZWNrSXNJblNjYWxlUmFuZ2Uoc2NhbGUpO1xyXG4gIH07XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgX2NoZWNrSXNJblNjYWxlUmFuZ2Uoc2NhbGU6IElTY2FsZSk6IHZvaWQge1xyXG4gICAgY29uc3Qgbm93ID0gRGF0ZS5ub3coKTtcclxuICAgIHRoaXMuaXNJblNjYWxlUmFuZ2UgPSBzY2FsZS5zdGFydERhdGUuZ2V0VGltZSgpIDw9IG5vdyAmJiBzY2FsZS5lbmREYXRlLmdldFRpbWUoKSA+PSBub3c7XHJcbiAgICB0aGlzLl9jZHIuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwiaXNJblNjYWxlUmFuZ2VcIj5cclxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiY3VzdG9tVGVtcGxhdGU7IGVsc2UgZGVmYXVsdERhdGVNYXJrZXJUZW1wbGF0ZVwiXHJcbiAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJjdXN0b21UZW1wbGF0ZVwiXHJcbiAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwie2xlZnRQb3NpdGlvbjogbGVmdFBvc2l0aW9ufVwiPlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG5cclxuICA8bmctdGVtcGxhdGUgI2RlZmF1bHREYXRlTWFya2VyVGVtcGxhdGU+XHJcbiAgICA8ZGl2IFtzdHlsZS5sZWZ0LnB4XT1cImxlZnRQb3NpdGlvblwiXHJcbiAgICAgICAgIFtzdHlsZS5oZWlnaHRdPVwiJ2NhbGMoMTAwJSAtICcgKyBoZWFkZXJIZWlnaHQgKyAncHgpJ1wiXHJcbiAgICAgICAgIGNsYXNzPSdkYXRlLW1hcmtlcic+PC9kaXY+XHJcbiAgPC9uZy10ZW1wbGF0ZT5cclxuPC9uZy1jb250YWluZXI+XHJcbiJdfQ==