import { Component, ContentChildren, ElementRef, Input, } from "@angular/core";
import { SdTimelineDefDirective } from "../directives/timeline-def.directive";
export class SdTimelineComponent {
    constructor(el) {
        this.el = el;
        this.align = "left";
        this.layout = "vertical";
        this.toggle = (item) => {
            item.active = !item.active;
        };
    }
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            switch (item.sdTimelineDef) {
                case "content":
                    this.contentTemplate = item.templateRef;
                    break;
                case "opposite":
                    this.oppositeTemplate = item.templateRef;
                    break;
                case "marker":
                    this.markerTemplate = item.templateRef;
                    break;
                case "detail":
                    this.detailTemplate = item.templateRef;
                    break;
            }
        });
    }
}
SdTimelineComponent.decorators = [
    { type: Component, args: [{
                selector: "sd-timeline",
                template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'sd-timeline': true,\r\n    'sd-timeline-left': align === 'left',\r\n    'sd-timeline-right': align === 'right',\r\n    'sd-timeline-top': align === 'top',\r\n    'sd-timeline-bottom': align === 'bottom',\r\n    'sd-timeline-alternate': align === 'alternate',\r\n    'sd-timeline-vertical': layout === 'vertical',\r\n    'sd-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last\" class=\"sd-timeline-event\">\r\n    <div class=\"sd-timeline-event-opposite\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"\r\n      ></ng-container>\r\n    </div>\r\n    <div class=\"sd-timeline-event-separator\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"sd-timeline-event-marker\"></div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"sd-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"sd-timeline-event-content\">\r\n      <div (click)=\"toggle(event)\" class=\"sd-timeline-event-box\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"\r\n        ></ng-container>\r\n        <ng-container *ngIf=\"event.active\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"detailTemplate; context: { $implicit: event }\"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                styles: [".sd-timeline{display:flex;flex-direction:column;flex-grow:1}.sd-timeline-left .sd-timeline-event-opposite{text-align:right}.sd-timeline-left .sd-timeline-event-content{text-align:left}.sd-timeline-right .sd-timeline-event{flex-direction:row-reverse}.sd-timeline-right .sd-timeline-event-opposite{text-align:left}.sd-timeline-right .sd-timeline-event-content{text-align:right}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n){flex-direction:row-reverse}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(odd) .sd-timeline-event-opposite{text-align:right}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n) .sd-timeline-event-opposite,.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(odd) .sd-timeline-event-content{text-align:left}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n) .sd-timeline-event-content{text-align:right}.sd-timeline-vertical .sd-timeline-event-connector{width:1px}.sd-timeline-event{display:flex;position:relative}.sd-timeline-event:last-child{min-height:0}.sd-timeline-event-opposite{padding:0 1rem 1rem}.sd-timeline-event-content{flex:1;padding:0 1rem 1rem}.sd-timeline-event-separator{align-items:center;display:flex;flex:0;flex-direction:column;position:relative;top:1rem}.sd-timeline-event-marker{align-self:baseline;background-color:#fff;border:1px solid #94b0ff;border-radius:50%;display:flex;height:12px;width:12px}.sd-timeline-event-connector{background-color:#e5e5e5;flex-grow:1}.sd-timeline-horizontal{flex-direction:row}.sd-timeline-horizontal .sd-timeline-event{flex:1;flex-direction:column}.sd-timeline-horizontal .sd-timeline-event-content,.sd-timeline-horizontal .sd-timeline-event-opposite{padding:1rem 0}.sd-timeline-horizontal .sd-timeline-event-connector{height:2px}.sd-timeline-horizontal .sd-timeline-event:last-child{flex:0}.sd-timeline-horizontal .sd-timeline-event-separator{flex-direction:row}.sd-timeline-horizontal .sd-timeline-event-connector{width:100%}.sd-timeline-bottom .sd-timeline-event,.sd-timeline-horizontal.sd-timeline-alternate .sd-timeline-event:nth-child(2n){flex-direction:column-reverse}.sd-timeline-event-box{border-radius:4px;box-shadow:0 2px 4px rgba(47,49,54,.16);cursor:pointer;padding:12px}"]
            },] }
];
SdTimelineComponent.ctorParameters = () => [
    { type: ElementRef }
];
SdTimelineComponent.propDecorators = {
    value: [{ type: Input }],
    style: [{ type: Input }],
    styleClass: [{ type: Input }],
    align: [{ type: Input }],
    layout: [{ type: Input }],
    templates: [{ type: ContentChildren, args: [SdTimelineDefDirective,] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IkM6L1VzZXJzL3VzZXIvRG9jdW1lbnRzL2xpYi1jb3JlLXVpL3Byb2plY3RzL3NkLWNvcmUvdGltZWxpbmUvIiwic291cmNlcyI6WyJzcmMvbGliL2NvbXBvbmVudHMvdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixLQUFLLEdBR04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFPOUUsTUFBTSxPQUFPLG1CQUFtQjtJQXFCOUIsWUFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7UUFkekIsVUFBSyxHQUFXLE1BQU0sQ0FBQztRQUV2QixXQUFNLEdBQVcsVUFBVSxDQUFDO1FBb0NyQyxXQUFNLEdBQUcsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUNoQixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUM3QixDQUFDLENBQUM7SUExQm1DLENBQUM7SUFFdEMsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDOUIsUUFBUSxJQUFJLENBQUMsYUFBYSxFQUFFO2dCQUMxQixLQUFLLFNBQVM7b0JBQ1osSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO29CQUN4QyxNQUFNO2dCQUVSLEtBQUssVUFBVTtvQkFDYixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztvQkFDekMsTUFBTTtnQkFFUixLQUFLLFFBQVE7b0JBQ1gsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO29CQUN2QyxNQUFNO2dCQUVSLEtBQUssUUFBUTtvQkFDWCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7b0JBQ3ZDLE1BQU07YUFDVDtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7O1lBaERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsYUFBYTtnQkFDdkIsbXVEQUF3Qzs7YUFFekM7OztZQVhDLFVBQVU7OztvQkFhVCxLQUFLO29CQUVMLEtBQUs7eUJBRUwsS0FBSztvQkFFTCxLQUFLO3FCQUVMLEtBQUs7d0JBRUwsZUFBZSxTQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQWZ0ZXJDb250ZW50SW5pdCxcclxuICBDb21wb25lbnQsXHJcbiAgQ29udGVudENoaWxkcmVuLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgSW5wdXQsXHJcbiAgUXVlcnlMaXN0LFxyXG4gIFRlbXBsYXRlUmVmLFxyXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IFNkVGltZWxpbmVEZWZEaXJlY3RpdmUgfSBmcm9tIFwiLi4vZGlyZWN0aXZlcy90aW1lbGluZS1kZWYuZGlyZWN0aXZlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogXCJzZC10aW1lbGluZVwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWxcIixcclxuICBzdHlsZVVybHM6IFtcIi4vdGltZWxpbmUuY29tcG9uZW50LnNjc3NcIl0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZFRpbWVsaW5lQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XHJcbiAgQElucHV0KCkgdmFsdWU6IGFueVtdO1xyXG5cclxuICBASW5wdXQoKSBzdHlsZTogYW55O1xyXG5cclxuICBASW5wdXQoKSBzdHlsZUNsYXNzOiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgpIGFsaWduOiBzdHJpbmcgPSBcImxlZnRcIjtcclxuXHJcbiAgQElucHV0KCkgbGF5b3V0OiBzdHJpbmcgPSBcInZlcnRpY2FsXCI7XHJcblxyXG4gIEBDb250ZW50Q2hpbGRyZW4oU2RUaW1lbGluZURlZkRpcmVjdGl2ZSkgdGVtcGxhdGVzOiBRdWVyeUxpc3Q8YW55PjtcclxuXHJcbiAgY29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBvcHBvc2l0ZVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBtYXJrZXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuXHJcbiAgZGV0YWlsVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHt9XHJcblxyXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcclxuICAgIHRoaXMudGVtcGxhdGVzLmZvckVhY2goKGl0ZW0pID0+IHtcclxuICAgICAgc3dpdGNoIChpdGVtLnNkVGltZWxpbmVEZWYpIHtcclxuICAgICAgICBjYXNlIFwiY29udGVudFwiOlxyXG4gICAgICAgICAgdGhpcy5jb250ZW50VGVtcGxhdGUgPSBpdGVtLnRlbXBsYXRlUmVmO1xyXG4gICAgICAgICAgYnJlYWs7XHJcblxyXG4gICAgICAgIGNhc2UgXCJvcHBvc2l0ZVwiOlxyXG4gICAgICAgICAgdGhpcy5vcHBvc2l0ZVRlbXBsYXRlID0gaXRlbS50ZW1wbGF0ZVJlZjtcclxuICAgICAgICAgIGJyZWFrO1xyXG5cclxuICAgICAgICBjYXNlIFwibWFya2VyXCI6XHJcbiAgICAgICAgICB0aGlzLm1hcmtlclRlbXBsYXRlID0gaXRlbS50ZW1wbGF0ZVJlZjtcclxuICAgICAgICAgIGJyZWFrO1xyXG5cclxuICAgICAgICBjYXNlIFwiZGV0YWlsXCI6XHJcbiAgICAgICAgICB0aGlzLmRldGFpbFRlbXBsYXRlID0gaXRlbS50ZW1wbGF0ZVJlZjtcclxuICAgICAgICAgIGJyZWFrO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIHRvZ2dsZSA9IChpdGVtKSA9PiB7XHJcbiAgICBpdGVtLmFjdGl2ZSA9ICFpdGVtLmFjdGl2ZTtcclxuICB9O1xyXG59XHJcbiJdfQ==