import { Component, ContentChildren, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { TimelineEntryComponent } from './entry/entry.component';
import { TimelineMode } from './timeline.model';
import * as i0 from "@angular/core";
/**
 * Component to manage timeline
 */
export class TimelineComponent {
    constructor() {
        /**
         * Timeline mode : vertical or horizontal
         */
        this.mode = TimelineMode.VERTICAL;
        /**
         * Alternate timeline entry position from left to right
         */
        this.alternate = true;
        /**
         * First entry position
         */
        this.side = 'left';
    }
    get class() {
        return 'mic-timeline timeline-' + this.mode;
    }
    ngOnChanges() {
        this.updateContent();
    }
    ngAfterViewInit() {
        setTimeout(() => this.updateContent());
        this.content.changes.subscribe(() => {
            this.updateContent();
        });
    }
    /**
     * Alternate position of timeline entries
     */
    updateContent() {
        if (this.content) {
            this.content.forEach((entry, index) => {
                entry.alternate = this.alternate ? index % 2 !== 0 : this.side === 'right';
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineComponent, selector: "mic-timeline", inputs: { mode: "mode", alternate: "alternate", side: "side" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "content", predicate: TimelineEntryComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"timeline-container\">\n  <div class=\"timeline-line\"></div>\n  <div class=\"timeline\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".mic-timeline.timeline-vertical{width:100%;position:relative;display:block;padding:50px 0 25px}.mic-timeline.timeline-vertical .timeline-line{position:absolute;top:0;height:100%;left:50%;width:8px;transform:translate(-50%);border-radius:5px}.mic-timeline.timeline-horizontal{padding-bottom:20px}.mic-timeline.timeline-horizontal .timeline-container{width:max-content;position:relative;display:block;padding:55px 50px 55px 25px}.mic-timeline.timeline-horizontal .timeline-line{position:absolute;top:50%;height:8px;left:0;width:100%;border-radius:5px}.mic-timeline.timeline-horizontal-list .timeline-container{width:max-content;position:relative;display:block;padding:50px 50px 55px 25px}.mic-timeline.timeline-horizontal-list .timeline-line{position:absolute;height:8px;left:0;width:100%;border-radius:5px}@media screen and (max-width: 599px){.mic-timeline.timeline-vertical{padding:0 0 25px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-timeline', encapsulation: ViewEncapsulation.None, template: "<div class=\"timeline-container\">\n  <div class=\"timeline-line\"></div>\n  <div class=\"timeline\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".mic-timeline.timeline-vertical{width:100%;position:relative;display:block;padding:50px 0 25px}.mic-timeline.timeline-vertical .timeline-line{position:absolute;top:0;height:100%;left:50%;width:8px;transform:translate(-50%);border-radius:5px}.mic-timeline.timeline-horizontal{padding-bottom:20px}.mic-timeline.timeline-horizontal .timeline-container{width:max-content;position:relative;display:block;padding:55px 50px 55px 25px}.mic-timeline.timeline-horizontal .timeline-line{position:absolute;top:50%;height:8px;left:0;width:100%;border-radius:5px}.mic-timeline.timeline-horizontal-list .timeline-container{width:max-content;position:relative;display:block;padding:50px 50px 55px 25px}.mic-timeline.timeline-horizontal-list .timeline-line{position:absolute;height:8px;left:0;width:100%;border-radius:5px}@media screen and (max-width: 599px){.mic-timeline.timeline-vertical{padding:0 0 25px}}\n"] }]
        }], propDecorators: { mode: [{
                type: Input
            }], alternate: [{
                type: Input
            }], side: [{
                type: Input
            }], content: [{
                type: ContentChildren,
                args: [TimelineEntryComponent]
            }], class: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64, 